隐藏嵌套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

理论:

该技术是使用比使用滚动条的子元素短的父容器.这张图片显示了我的意思:

实践 :

在你的情况下,我建议使用绝对位置和负底值,#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
    /*
}