Question

This是我使用的参考，它解释了如何使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()不会起作用。

更新

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

当我将overflow: hidden设置为可滚动项的父容器时，我无法滚动（本机javascript滚动功能也不起作用）。
我想只滚动溢出的容器，而不是整个窗口。这可以通过在$.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

理论：

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

Hide scollbar

练习：

在您的情况下，我建议在#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
    /*
}

Answer 2

scollbars占用大约20px所以只需让你可滚动div高20px和20px更宽，你的滚动条将被隐藏：

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

Example

Answer 3

这是一种欺骗，但你可以将它隐藏在#content这样DEMO

之后吗？

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

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

Answer 4

如果您知道所有可以滚动的容器，您可以使用CSS和一些JS来隐藏滚动条。对于基于webkit的浏览器（safari，google chrome，opera），它将是仅限CSS的解决方案，将滚动条宽度设置为0.对于IE，Firefox和其他非webkit浏览器，您应该计算将用作负边距的滚动条宽度 - 适合您的可滚动内容。

为此，您应该使用overflow-y:scroll将内容封装到div中，以便始终显示垂直滚动条并使用margin-right:-17px和父overflow:hidden隐藏此滚动条。示例是here。无需设定固定宽度，也不需要设置高度。

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

Answer 5

我基本上将padding:0 1em 1em 0;添加到应该隐藏的元素中，如果父有溢出，则隐藏两个滚动条：隐藏。如果只隐藏其中一个，请调整padding-bottom或仅padding-right。

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

Answer 6

使内容本身具有水平滚动的解决方案。

只需增加#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;
}

Answer 7

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

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

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

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

原油＆＃34;原油＆＃34;因为我硬编码了一些像滚动的500px数量的值，你可以写一些更多的javascript动态检测滚动多少。另外，我不知道对于您和其他用户来说，wheelDelta值是+120 for up和-120 for down。

另请注意，scrolLeft（）可以设置动画..以获得更平滑的过渡。

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

8 个答案:

理论：

练习：