使用jQuery隐藏div滚动条，但保留滚动？
使用jQuery隐藏div滚动条，但保留滚动？
提问于 2012-08-30 04:36:13
我试图能够在一个div中滚动，但不显示实际的滚动条。
我需要用户能够使用滚轮滚动
有没有人知道我如何才能做到这一点？
谢谢!
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-08-30 04:49:17
好吧，真正的原因是你为什么想要这样做，但既然你问了，我会试着解决你的问题。
您将需要两个div。一个嵌套在另一个中。
<div class="outside">
<div class="inside">
Scrolling Content Goes here.
</div>
</div>然后，您将需要一些CSS来帮助解决这种情况。溢出:自动将给你滚动一旦它超过了高度限制。为了这个例子，我设置了一个随机宽度。在右侧放置一个填充，将滚动条推出.outer div类。这样，您就不必担心内容会被放在.outer目录下。
.inside { width: 500px; overflow: auto; height: 300px; padding-right: 20px; }对于外部类，您需要指定相同的高度，相同的宽度，但overflow:hidden。
.outside { width: 500px; height: 300px; overflow: hidden; }示例：jsFiddle
Stack Overflow用户
发布于 2012-08-30 04:46:49
也许你可以使用css来隐藏它，或者用它做一些样式，让它看起来是隐藏的。这是我找到的一些链接。
http://css-tricks.com/custom-scrollbars-in-webkit/
http://www.yourhtmlsource.com/stylesheets/scrollbars.html
Stack Overflow用户
发布于 2012-08-30 05:15:23
这是在IE和Firefox中测试过的-两者处理填充的方式略有不同，所以我使用高度和宽度来考虑内容可见性。
有两个容器是有意义的-一个用于容器，另一个用于内容，然而，由于浏览器处理填充的方式不同，将滚动条推入隐藏区域比您想象的要难得多。这就是第三个容器的用武之地：
- One容器用于不带滚动条的父维度
- One容器，其中包含推送到隐藏区域的滚动条
- One容器，该容器包含具有正确宽度的内容设置
这是通过样式表技巧实现的-样式表已经被注释，所以您可以按照其中的说明/注释进行操作。
希望这能有所帮助！:)
<html>
<head>
<style type="text/css">
/* Propetary paragraph style */
p {
padding: 0px;
margin: 0px 0px 7px 0px;
}
/* Global notes:
- Since the
/* This is the outer container - set desired height and width here */
.scrollabelDivContainer {
width: 300px;
height: 100px;
padding: 0px;
margin: 0px;
overflow: hidden;
border: 2px dashed #ddd;
}
/* This is the div inside the container - the height should
match the container and width be more (to push the
scrollbar into the hidden content area) */
.scrollableDiv {
width: 400px;
height: 100px;
padding: 0px;
margin: 0px;
overflow-x: hidden;
overflow-y: scroll;
}
/* This houses the content. Set the widget 10px less than the
container width to ensure the content is visible in all browsers */
.scrollableDivContent {
width: 290px;
padding: 0px;
margin: 0px;
overflow: auto;
}
</style>
</head>
<body>
<div class="scrollabelDivContainer">
<div class="scrollableDiv">
<div class="scrollableDivContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt consequat urna ut tincidunt. Vestibulum molestie leo quis dui malesuada vulputate eget tempor purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras nec orci enim, vel tristique lectus. Sed lobortis ultrices enim eu consequat.</p>
<p>Integer magna lectus, iaculis sit amet interdum nec, ullamcorper ut purus. Sed aliquam sollicitudin lacinia. Proin porttitor aliquet lorem, eu dictum lorem suscipit et. Ut vestibulum eros quis turpis auctor id sollicitudin risus faucibus. Quisque volutpat nibh ut sem euismod rutrum. Ut eget orci non quam scelerisque laoreet sit amet a metus. Mauris aliquam facilisis lacinia.<p>
</div>
</div>
</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12186100
复制相关文章
相似问题
腾讯云开发者
