隐藏嵌套div的滚动条，但仍然使其可滚动 [英] Hide scroll bar of nested div, but still make it scrollable

问题描述

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

This is a reference that I used, which explains how to make a div scrollable with its scroll bar hidden. The only difference is that I have nested divs. Check my 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（）将无法工作。

Like above, I have a overflowed horizontal div and I want to hide its scroll bar. I have to make it still scrollable because $.scrollTo() wouldn't work otherwise.

UPDATE：

UPDATE:

我已阅读所有答案，但我仍然没有解决我的问题，不知道是什么原因。这是有麻烦的生活。
基本上，我试图跟踪这个几乎完全相同，但必须有一些原因，我的网站没有按预期工作。有两个问题。

I have read all the answers, but I still have not resolved my problem and don't know what's causing it. This is the live that's having troubles. Basically, I am trying to follow this almost exactly the same, but there must be some reason that my website isn't working as expected. There are two problems.

1. 当我将 overflow：hidden


2. 我想只滚动溢出的容器，而不是整个窗口。这可以通过在 $。localScroll（{target：'＃projects-content'}）中设置目标来完成，但是当我设置目标时，如果没有，滚动只要 overflow：hidden 不起作用。
   再次感谢任何帮助。

1. When I set overflow: hidden to a parent container of scrollable items, I cannot scroll (native javascript scroll functions do not work too).
2. I want to scroll just the overflowed container, not the entire window. This can be done by setting a target in $.localScroll({ target: '#projects-content' }) but nothing scrolls when I set the target. If I don't, scrolling works as long as overflow:hidden is not applied. Again, any help would be greatly appreciated.

HTML： b
$ b

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（）。

After I added overflow:scroll to #project-content, the scrolling works as expected. All I need now is making scroll bars disappear in #project-content. I tried adding overflow:hidden to its parent but had no success. I also tried adding it to html, body, but then the entire document refuses to accept any scrolling functions like scrollTop().

任何帮助将非常感谢。

推荐答案

理论：

该技术是使用比带有滚动条的子元素短的父容器。此图片显示了我的意思：

Theory :

The technique is to use a parent container that is shorter than the child element with scrollbar. This image shows what I mean :

在您的情况下，我建议您使用绝对定位和负底值＃project-content ，因此它在底部溢出它的父容器（ #projects ）。

In your case, I suggest using absolute positionning and negative bottom value on #project-content so it overflows it's parent container (#projects) at the bottom.

现在点是什么负值？它应该是与滚动但的滚动条根据浏览器不同的宽度的值相同的值。所以我建议给一个更大的值： -30px ，以确保它被隐藏。

The point is now what negative value? It should be the same value as the with of a scroll but scrollbars are never the same width according to browsers. So I suggest giving a bigger value : -30pxto be sure it is hidden. You will just need to be carefull that you don't have content to close to the bottom that can be hidden on browesers with thin scrollbars.

这是你应该使用的CSS文件添加到您的网站：

This is the CSS you should add to your website :

#projects{
    position: relative;
}

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

这篇关于隐藏嵌套div的滚动条，但仍然使其可滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！