隐藏默认浏览器滚动条而不会溢出：使用“完美滚动条”时隐藏
[英]Hide default browser scroll bar without overflow:hidden when using Perfect Scrollbar
问题描述
I'm using "perfect scroll bar" on my web page. 
我在网页上使用“完美滚动条”。 To hide the default browser scroll bars it adds "overflow:hidden". 为了隐藏默认的浏览器滚动条，它添加了“ overflow：hidden”。 ( http://noraesae.github.io/perfect-scrollbar/ ) （ http://noraesae.github.io/perfect-scrollbar/ ）
I'm also using Jquery Sortable in the scrollable section. 我还在可滚动部分中使用了Jquery Sortable。 ( http://jqueryui.com/sortable/ ) The overflow hidden needed for perfect scroll is a barrier for sortable. （ http://jqueryui.com/sortable/ ）完美滚动所需的隐藏溢出是可排序的障碍。 When I drag a div it won't scroll down as needed because overflow is hidden. 当我拖动div时，它不会根据需要向下滚动，因为隐藏了溢出。 ( But when you scroll with the mouse wheel it will scroll ). （但是当您使用鼠标滚轮滚动时，它将滚动）。
When I removed overflow:hidden the default scrollbar AND the perfect scroll bar shows. 当我删除overflow：hidden时，默认的滚动条和完美的滚动条就会显示出来。 (Both of them work as expected) （它们都按预期工作）
So, how do I visually hide the scrollbar so that the overflow is not hidden but only the scrollbar is just not visible. 因此，我如何在视觉上隐藏滚动条，以便不隐藏溢出，而仅隐藏滚动条。
3 个解决方案
解决方案1
0 2014-06-06 08:23:36
You can enclose your entire page inside a div whose height and width are equal to that of the window and then apply the perfect scroll bar on that div. 您可以将整个页面封闭在一个高度和宽度等于窗口高度的div内，然后在该div上应用完美的滚动条。
HTML: HTML：
<div class="body">
<!-- page content -->
</div>
JS JS
$(".body").css({
"width": $(window).width() + "px",
"height": $(window).height() + "px"
});
解决方案2
0 2014-06-06 08:32:22
The short answer here, is that without using overflow: hidden you're not going to be able to hide the scrollbars. 简短的答案是，不使用overflow: hidden您将无法隐藏滚动条。
While webkit browsers do support ::-webkit-scrollbar , ::-webkit-scrollbar-button , ::-webkit-scrollbar-track , ::-webkit-scrollbar-track-piece , ::-webkit-scrollbar-thumb , ::-webkit-scrollbar-corner and ::-webkit-resizer in your CSS, targeting other browsers will be difficult. 虽然webkit浏览器确实支持::-webkit-scrollbar ， ::-webkit-scrollbar-button ， ::-webkit-scrollbar-track ， ::-webkit-scrollbar-track-piece ， ::-webkit-scrollbar-thumb ， CSS中的::-webkit-scrollbar-corner和::-webkit-resizer很难定位到其他浏览器。
A possible "hack" could be wrapping your content in a div with the same size as the window, applying PerfectScrollbars to said div, and placing your jQuery Sortable content inside a child div. 可能的“ hack”可能是将您的内容包装在与窗口大小相同的div中，将PerfectScrollbars应用于所述div，然后将jQuery Sortable内容放入子div中。
解决方案3
0 2018-09-28 02:11:26
You can try this 你可以试试这个
HTML 的HTML
<body>
<div id="scroll">
//Your all content
</div>
</body>
CSS 的CSS
body{
overflow: hidden;
}
#scroll{
position: relative;
margin: 0px auto;
padding: 0px;
width: auto;
height: auto;
}
JS JS
$(window).resize(function(){
$("#scroll").css({
"width": $(window).width() + "px",
"height": $(window).height() + "px"
});
});
const ps = new PerfectScrollbar('#scroll', {
wheelSpeed: 2,
wheelPropagation: true,
minScrollbarLength: 20
});
ps.update();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.