Question

我想创建自己的滚动条，但为了完成这项工作，我首先需要隐藏默认滚动条但允许滚动。

我已经尝试过：

overflow-y:hidden;

但是你隐藏滚动条并禁用滚动。

我知道还有其他人在这里提出这个问题，但我不想只是在填充物中隐藏它。我想要一种完全隐藏它的方式。

Answer 1

您不必允许手动滚动，您可以以编程方式滚动。只需获取自定义滚动条的位置并相应滚动内容...

这是一个带按钮的简短示例：

＆＃13;

document.getElementById("right").addEventListener("mousemove",function(){
   document.getElementById("outer").scrollLeft+=10;
});
document.getElementById("left").addEventListener("mousemove",function(){
   document.getElementById("outer").scrollLeft-=10;
});

＆＃13;

#outer {
    float:left;
    border:2px solid red;
    height:100px;
    width:200px;
    display:inline-block;
    overflow-x:hidden;
}
#inner {
    display:block;
    height:100%;
    white-space:nowrap;
}
#left {
    float:left;
    border:2px solid red;
    height:100px;
    width:50px;
    display:inline-block;
    background:lime;
    line-height:100px;
}
#right {
    float:left;
    border:2px solid red;
    height:100px;
    width:50px;
    display:inline-block;
    background:lime;
    line-height:100px;
}

＆＃13;

<div id="left">&lt--</div>
<div id="outer">
    <div id="inner">sdk hfkhsdbf khsdbf kbsdf kbsdkjf sdkjbg lsdkbg;kSBGKdbs gksbd gksdb g</div>
</div>
<div id="right">--&gt</div>

＆＃13;

Answer 2

您可以隐藏滚动条，但可以使用以下属性在Firefox中滚动：

scrollbar-width: none;

Answer 3

执行此操作的最佳方法是使用jQuery插件。

最可定制且最灵活的是jScrollPane，它适用于垂直和水平滚动，并允许您通过将样式应用于句柄，轨道，包装等元素，使用CSS轻松设置样式。请注意，滚动条确实需要造型因为它们非常丑陋。

如果你想要更漂亮的尝试perfect-scrollbar，它很好地模仿滚动条的行为，看起来像Mac OS X上的那些（好的和东西，仅在需要时可见）。

我也使用了jQuery-slimScroll，它也很好地完成了这项工作。重量轻，易于使用，外观美观，易于设计，但不像第一个那样可定制。

理论上也可以仅使用CSS隐藏滚动条，但这对于用户体验来说非常糟糕且非常糟糕。我肯定会使用jQuery插件解决方案，因为他们将自己处理默认滚动条。

Answer 4

这里是CSS：

::-webkit-scrollbar {
    height: 0px !important;
    width: 0px !important;
    display: none !important;
}

另请参阅webkit.org上的Developer Documentation。

你如何隐藏滚动条但允许滚动？

4 个答案: