<分区>
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设置为可滚动元素的父容器时，我无法滚动( native 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()。
任何帮助将不胜感激!
