Question

我正在使用＆＃34;完美的滚动条＆＃34;在我的网页上。要隐藏默认的浏览器滚动条，它会添加＆＃34; overflow：hidden＆＃34;。（http://noraesae.github.io/perfect-scrollbar/）

我也在可滚动部分使用Jquery Sortable。（http://jqueryui.com/sortable/）完美滚动所需的溢出隐藏是可排序的障碍。当我拖动div时，它不会根据需要向下滚动，因为溢出是隐藏的。（但是当你用鼠标滚轮滚动它会滚动）。

当我删除溢出时：隐藏默认滚动条和完美滚动条显示。（两者都按预期工作）

那么，我如何直观地隐藏滚动条，以便不会隐藏溢出，但只有滚动条不可见。

Answer 1

您可以将整个页面封装在高度和宽度等于窗口宽度的div中，然后在该div上应用完美的滚动条。

HTML：

<div class="body">
  <!-- page content -->
</div>

JS

$(".body").css({
 "width": $(window).width() + "px",
 "height": $(window).height() + "px" 
});

Answer 2

这里简短的回答是，如果不使用overflow: hidden，您将无法隐藏滚动条。

虽然webkit浏览器确实支持::-webkit-scrollbar，::-webkit-scrollbar-button，::-webkit-scrollbar-track，::-webkit-scrollbar-track-piece，::-webkit-scrollbar-thumb，::-webkit-scrollbar-corner和::-webkit-resizer你的CSS，定位其他浏览器将很困难。

可能的＆＃34; hack＆＃34;可以将您的内容包装在与窗口大小相同的div中，将PerfectScrollbars应用于div，并将jQuery Sortable内容放在子div中。

Answer 3

您可以尝试

HTML

<body>
  <div id="scroll">
       //Your all content
  </div>
</body>

CSS

body{
    overflow: hidden;
}
#scroll{
    position: relative;
    margin: 0px auto;
    padding: 0px;
    width: auto;
    height: auto;
}

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();

隐藏默认浏览器滚动条而不溢出：使用Perfect Scrollbar时隐藏

3 个答案: