隐藏嵌套div的滚动条，但仍使其可滚动[重复]

Question

这是我使用的一个引用，它解释了如何使一个div在其滚动条隐藏的情况下可滚动。唯一的区别是我有嵌套的div。检查我的小提琴

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;
}

更新：

在我将overflow：scroll添加到#project-content中后，滚动按预期工作。现在我所需要的只是让滚动条在#project-content中消失。我尝试将overflow：hidden添加到其父级，但没有成功。我还尝试将其添加到HTML,body中，但随后整个文档拒绝接受任何类似ScrollTop()的滚动函数。

任何帮助都将不胜感激！

Answer 1

这是一种欺骗，但是你能把它隐藏在#content后面吗，就像这个演示一样

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

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

Answer 2

Scollbar占用大约20px，所以只要使您的滚动div高20px，宽20px，您的滚动条将被隐藏：

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

示例

Answer 3

技术是使用比带有ScrollBar的子元素短的父容器。这张图片说明了我的意思：

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

现在的重点是什么负值？它应该与滚动的with值相同，但是根据浏览器，滚动条的宽度从不相同。所以我建议给出一个更大的值:-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
    /*
}