使用 jQuery 隐藏 div 滚动条，但保留滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12186100/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using jQuery to hide div scrollbar, but retain scrolling?
提问by Eax
I am trying to be able to scroll inside one div but without showing the actual scrollbar.
我试图能够在一个 div 内滚动但不显示实际的滚动条。
I need the user to be able to scroll using the scrollwheel
我需要用户能够使用滚轮滚动
Does anyone have ideas as to how I can accomplish this?
有没有人对我如何做到这一点有想法？
Thanks!
谢谢！
回答by ZombieCode
Well, the real reason would be why you would want that, but since you asked I will try and solve your issue.
好吧，真正的原因是你想要那个的原因，但既然你问了，我会尝试解决你的问题。
You will need two divs. One nested inside the other.
您将需要两个 div。一个嵌套在另一个里面。
<div class="outside">
<div class="inside">
Scrolling Content Goes here.
</div>
</div>
You will then need some CSS to help this situation out. The overflow:auto will give you the scrolling once it goes past the height limitations. I put on an random width for sake of the example. Putt a padding on the right hand side to push the scroll bar out of the .outer div class. This way you won't have to worry about the content going under the .outer div.
然后，您将需要一些 CSS 来帮助解决这种情况。一旦超过高度限制，overflow:auto 将为您提供滚动。为了这个例子，我设置了一个随机宽度。在右侧放置一个填充以将滚动条推出 .outer div 类。这样您就不必担心 .outer div 下的内容。
.inside { width: 500px; overflow: auto; height: 300px; padding-right: 20px; }
for the outer class you will need to specify the same height, same width, but overflow:hidden.
对于外部类，您需要指定相同的高度、相同的宽度，但溢出：隐藏。
.outside { width: 500px; height: 300px; overflow: hidden; }
EXAMPLE: jsFiddle
示例：jsFiddle
回答by index
Maybe you can use css and hide or do some styling with it so it looks hidden. Here's one some links I found.
也许您可以使用 css 并隐藏或使用它进行一些样式设置，使其看起来隐藏。这是我找到的一些链接。
http://css-tricks.com/custom-scrollbars-in-webkit/
http://css-tricks.com/custom-scrollbars-in-webkit/
回答by Stephan Robberts
This was tested in IE and Firefox - both handle padding a little differently, so I am using height and width to account for content visibility.
这在 IE 和 Firefox 中进行了测试 - 两者处理填充的方式略有不同，因此我使用高度和宽度来考虑内容可见性。
It makes sense to have 2 containers - one for the container and one for the content, however since browsers handle padding differently, it's a lot harder than you think to push the scrollbar into the hidden area. This is where the third container comes in:
有 2 个容器是有意义的 - 一个用于容器，一个用于内容，但是由于浏览器处理填充的方式不同，将滚动条推入隐藏区域比您想象的要困难得多。这是第三个容器出现的地方：
- One container for the parent dimensions without scrollbars
- One container that contains the scrollbar which is pushed into the hidden area
- One container that houses the content with the correct width set
- 没有滚动条的父维度的一个容器
- 一个包含滚动条的容器，滚动条被推入隐藏区域
- 一个容纳具有正确宽度设置的内容的容器
This is accomplished through stylesheet tricks - the stylesheet has been commented so you can follow the instructions / comments in there.
这是通过样式表技巧完成的 - 样式表已被注释，因此您可以按照那里的说明/注释进行操作。
Hope this helps! :)
希望这可以帮助！:)
<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>
