隐藏嵌套div的滚动条，但仍可滚动。

Question

这个 是我使用的参考资料，它解释了如何隐藏带有滚动条的div，并仍然能够滚动。唯一的区别是我有嵌套的div。请查看我的 fiddle

HTML：

<div id="main">
    <div id="sub-main">
        <div id="content">
            <div id="item-container">
                <div class="item">a</div>
                <div class="item">b</div>
                <div class="item">c</div>
            </div>
        </div>
    </div>
</div>

CSS：

#main {
    width: 500px;
    height: 500px;
}

#sub-main {
    width: 500px;
    height: 500px;
    overflow: hidden;
}

#content {
    background-color: red;
    width: 500px;
    height: 500px;
    overflow: auto;
}

#item-container {
    width: 1500px;
    height: 500px;
}

.item {
    width: 500px;
    height: 500px;
    font-size: 25em;
    text-align: center;
    float: left;
}

如上所述，我有一个溢出的水平div，我想隐藏它的滚动条。 我必须使其仍然可滚动，因为否则 $.scrollTo() 将无法使用。

更新：

我已经阅读了所有答案，但我仍然没有解决我的问题，也不知道是什么原因导致的。 这是遇到问题的实时演示网站。 基本上，我试图按照这个做几乎相同的事情，但我的网站似乎不像预期的那样工作。 有两个问题。

1. 当我将 overflow：hidden 设置为可滚动项目的父容器时，我无法滚动（本机JavaScript滚动函数也不起作用）。
2. 我只想滚动溢出的容器，而不是整个窗口。 这可以通过在 $ .localScroll（{target：'＃projects-content'}）中设置目标来完成，但是当我设置目标时，没有任何滚动。 如果我不这样做，则只要不应用overflow：hidden，滚动就可以正常工作。 再次感谢任何帮助。

HTML：

<div id="projects"> <!-- start of entire projects page -->
  <div id="project-sidebar">
    <a href="#project-first">
      <div class="sidebar-item sidebar-first">first</div>
    </a>
    <a href="#project-second">
      <div class="sidebar-item sidebar-second">second</div>
    </a>
    <a href="#">
      <div class="sidebar-item sidebar-third">third</div>
    </a>
  </div>

  <div id="project-content"> <!-- this must be the scrollable itmes' container, not the entire window -->
    <div id="project-first" class="project-item"> 
      <!-- these items should be scrollable -->
      <div class="project-subitem" id="first-sub1">
        <a href='#first-sub2' class='next'>next</a>
      </div>
      <div class='project-subitem' id='first-sub2'>
        <a href='#first-sub1' class='prev'>prev</a>
      </div>
      <!-- end of scrollable items -->
    </div>
  </div> <!-- end of scroll scroll container -->
</div> <!-- end of entire projects page -->

<script>
  // FIXME: when I set target, nothing scrolls.
  // But I don't want the entire window to scroll
  $('#projects').localScroll({
    //target: '#project-content',
    hash: false
  });
</script>

CSS

#project-content {
  width: 80%;
  height: 100%;
  position: relative;
  float: left;
}

#project-sidebar {
  float: left;
  width: 20%;
  height: 100%;
}

.project-item {
  width: 300%;
  height: 100%;
}

.project-subitem {
  height: 100%;
  width: 33.33%;
  position: relative;
  float: left;
}

更新：

在我给#project-content添加了overflow:scroll后，滚动条可以按预期工作了。现在我需要做的是让#project-content中的滚动条消失。我尝试将overflow:hidden添加到它的父级元素上，但没有成功。我还尝试将其添加到html, body中，但整个文档都无法使用任何滚动功能，例如scrollTop()。

非常感谢您的帮助！

- Maximus S

---

你可以考虑查看像jscrollpane这样的插件。至少，你可以找出代码的作用并重现你想保留的部分。 - drew_w

我有点困惑？只需使用上一个问题中的代码即可。演示 像这样？ - Ruddy

也许我没有理解到重点，但是你为什么需要它呢？$.scrollTo()是什么？你仍然可以在纯JS中使用dom.scrollLeft和dom.scrollTop，并且通过overflow: hidden; 如示例所示。 - Idra

嗨@drew_w，非常感谢您的帮助。我更新了问题以更好地解释我遇到麻烦的原因。 - Maximus S

我用jQuery在jsfiddle上粗略地完成了这个，http://jsfiddle.net/5GCsJ/942/。 - droplet

Answer 1

理论：

这个技巧是使用一个比带滚动条的子元素更短的父容器。这张图片展示了我的意思：

实践：

在您的情况下，我建议在#project-content上使用绝对定位和负底部值，以便它在底部溢出其父容器(#projects)。

问题是现在应该选用什么样的负值？它应该是与滚动条宽度相同的值但是不同浏览器的滚动条宽度不同。因此，我建议给一个更大的值：-30px以确保它被隐藏。您只需要小心不要有内容靠近底部，否则可能会在滚动条较窄的浏览器上被隐藏。

这是您应该添加到网站的CSS：

#projects{
    position: relative;
}

#project-content{
    position: absolute;
    top: 0;
    left: 20%;
    bottom: -30px;
    /* remove: 
        height: 100%; 
        position: relative; 
        float: left; 
        padding-bottom: -15px
    /*
}

- web-tiki

---

一旦你使用移动设备，这种方法就不起作用了（因为它们具有不同的滚动条大小）。必须采用JS方法。 - Ced

Answer 2

滚动条占用大约20像素，因此只需将可滚动的div高度增加20像素，宽度增加20像素，您的滚动条就会被隐藏：

#content {
    background-color: red;
    width: 520px;
    height: 520px;
    overflow: auto;
}

Example

- Pete

Answer 3

这有点作弊，但你可以像这样将它隐藏在#content后面演示

#content {
    background-color: red;
    width: 500px;
    height: 480px;
    overflow: hidden;
}

#item-container {
    width: 1500px;
    height: 500px;
    overflow: scroll;
}

- Niklas

---

你发布的 Fiddle 和 OP 的完全一样。 - Ayman Safadi

谢谢，已更新。 - Niklas

嗨@Niklas，感谢你的帮助。不幸的是，这并没有解决我的问题。请您能否看一下我的更新？ - Maximus S

Answer 4

如果您知道哪些容器可以滚动，您可以使用CSS和一点JS来隐藏滚动条。对于基于Webkit的浏览器（Safari，Google Chrome，Opera），将滚动条宽度设置为0将是仅使用CSS的解决方案。对于IE，Firefox和其他非Webkit浏览器，您应该计算将用作负边距右侧的滚动条宽度，以便您的可滚动内容。

要做到这一点，您应该将内容包装在带有overflow-y:scroll的div中，以始终显示垂直滚动条，并使用margin-right:-17px和父级overflow:hidden隐藏此滚动条。示例在这里。无需设置固定宽度或高度。

这是在jQuery Scrollbar中使用的方法。隐藏水平滚动条更加复杂，需要处理内容更改以重新计算容器高度。

- Gromo

---

滚动条在任何浏览器上都是17像素吗？ - Cichy

很遗憾，不行。它可以有不同的大小。此外，滚动条的大小取决于当前页面缩放比例。 - Gromo

Answer 5

解决办法是使内容具有水平滚动条。只需增加#main和#content的高度即可。

#main {
    width: 500px;
    height: 520px;

}

#sub-main {
    overflow: hidden;

}

#content {
    background-color: red;
    width: 500px;
    height: 520px;
    overflow: auto;

}

#item-container {
    width: 1500px;
    height: 500px;
    overflow: hidden;
}

.item {
    width: 500px;
    height: 500px;
    font-size: 25em;
    text-align: center;
    float: left;
}

- Samuraik

Answer 6

我基本上在应该隐藏的元素上添加了 padding:0 1em 1em 0;，这将隐藏如果父元素具有 overflow:hidden，则隐藏两个滚动条。 如果只需要隐藏其中一个滚动条，请调整 padding-bottom 或仅 padding-right。

1em 是大多数浏览器中滚动条的平均宽度： http://jsfiddle.net/5GCsJ/912/

- G-Cyrillus

Answer 7

使用脚本创建自定义滚动条。

http://manos.malihu.gr/jquery-custom-content-scroller/

然后使用CSS（或修改脚本或更改脚本配置）来隐藏自定义滚动条。

- Pawel

Answer 8

我使用jQuery和你的示例粗略地完成了这个。

请查看fiddle：

我只是简单地检测滚轮的方向，并使用jQuery推动水平滚动条。

$(document).ready(function(){
    $('#content').bind('mousewheel', function(e){
        var curScroll = $("#content").scrollLeft();
        if(e.originalEvent.wheelDelta > 0) {            
            $("#content").scrollLeft(curScroll-500);
        } else {
            $("#content").scrollLeft(curScroll+500);
        }
    });
});

它是“粗糙的”，因为我硬编码了一些值，例如要滚动的500像素，你可以编写更多的javascript来动态检测要滚动多少。此外，我不知道wheelDelta值对于您和其他用户是否为+120向上和-120向下。

还要注意，scrolLeft（）可以进行动画处理...以获得更平滑的过渡效果。

- droplet