Javascript 隐藏滚动条溢出：启用滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13684403/
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
Hide scrollbar with overflow:scroll enabled
提问by StephenJRomero
I need to hide the scrollbar on a div that has overflow:scroll; enabled so that the div will scroll with mouse and keyboard but the scrollbar itself will not be displayed.
我需要在溢出的 div 上隐藏滚动条：scroll; 启用以便 div 将使用鼠标和键盘滚动，但不会显示滚动条本身。
is there a way of doing this with css or is javascript the way to go?
有没有办法用 css 或 javascript 来做到这一点？
采纳答案by Maloric
You could put the scrolling div inside of a second div with overflow hidden, then just make the inner div a little wider and taller (the amount may vary depending on the browser, however).
您可以将滚动 div 放在第二个隐藏溢出的 div 内，然后将内部 div 设置得更宽更高（但是，数量可能因浏览器而异）。
Something like this:
像这样的东西：
#outer {
overflow:hidden;
width:200px;
height:400px;
border:1px solid #ccc;
}
#inner {
overflow:scroll;
width:217px;
height:417px;
}?
Full example at http://jsfiddle.net/uB6Dg/1/.
http://jsfiddle.net/uB6Dg/1/ 上的完整示例。
Edit:Unfortunately you can still get to the scrollbars by highlighting the text and dragging, and it does make padding etc a bit more of a pain, but other than this I think javascript is the way to go.
编辑：不幸的是，您仍然可以通过突出显示文本和拖动来获得滚动条，并且它确实使填充等更加痛苦，但除此之外，我认为 javascript 是要走的路。
回答by Stephan B?nnemann-Walenta
回答by Alex McCabe
@Maloric answer pointed me in the correct direction, however I needed fluid width, and I also wanted to be more accurate on the width of the scrollbar.
@Maloric 的回答为我指明了正确的方向，但是我需要流畅的宽度，而且我还希望滚动条的宽度更准确。
Here is a function that will return the exact width of the scrollbar based on what the browser reports.
这是一个函数，它将根据浏览器报告的内容返回滚动条的确切宽度。
var getWidth = function () {
var scrollDiv = document.createElement('div'),
scrollbarWidth;
scrollDiv.style.overflow = 'scroll';
document.body.appendChild(scrollDiv);
scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);
return scrollbarWidth;
};
var width = getWidth();
var container = document.querySelector('.overflowing-container');
container.style.paddingRight = width + 'px';
container.style.marginRight = (width * -1) + 'px';
// Just for testing purposes
document.querySelector('.scrollbar-width').innerHTML = 'scrollbar height: ' + getWidth().container {
height: 200px;
overflow-x: hidden;
overflow-y: auto;
width: 500px;
}
.overflowing-container {
height: 100%;
overflow-y: auto;
width: 100%;
}<div class="container">
<div class="overflowing-container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique feugiat metus, eget mollis nibh vestibulum eu. Nullam eros orci, gravida eu quam nec, maximus posuere dui. Maecenas erat magna, elementum eget nunc eget, tincidunt varius nisl. Phasellus pretium congue consectetur. Donec rutrum nisi sed eros posuere, vel pretium nunc viverra. Praesent consequat sagittis urna, quis convallis magna gravida et. In sed eleifend arcu.
Duis ornare condimentum est luctus malesuada. Morbi nec sodales nunc. Morbi vehicula tristique massa, nec lacinia tellus vulputate fringilla. Nam eget pulvinar libero. Vestibulum ligula mi, tincidunt ac pellentesque vitae, convallis eu tortor. Cras varius dolor sit amet libero rhoncus, mattis aliquet augue porttitor. Etiam sollicitudin, sem ut mollis imperdiet, erat enim gravida tortor, et imperdiet sem nibh in ex. Aliquam ac aliquam risus. Suspendisse gravida suscipit sapien, et ultrices massa ornare eget. Nulla venenatis pellentesque arcu at auctor. Sed libero ligula, pretium in metus a, malesuada ullamcorper leo. Vivamus tempor velit in ante fringilla rhoncus. Nam ac iaculis arcu. Mauris a nisi quis arcu feugiat posuere.
</div>
</div>
<div class="scrollbar-width"></div>The above snippet shows this in action.
上面的代码片段显示了这一点。
回答by Shakeel
You need to make use of the jquery plugin from this site http://jscrollpane.kelvinluck.com/
您需要使用此站点http://jscrollpane.kelvinluck.com/中的 jquery 插件
