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

Question

我希望制作自己的滚动条，但在此之前，我需要隐藏默认的滚动条，同时允许滚动。

我已经尝试过：

overflow-y:hidden;

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

我知道这里还有其他人问过这个问题，但我不想只添加填充来隐藏它。我想完全隐藏它的方法。

- Vinc199789

---

可能是[隐藏滚动条，但仍能滚动的]重复问题（https://dev59.com/j2Qn5IYBdhLWcg3wpYj0） - alex

在浏览了链接问题的答案后，我认为有必要再次提出这个问题。之前的答案只适用于特定的一组浏览器，那个回答的作者甚至说如果你想要更广泛的浏览器支持，那么你应该再次提问以获取更广泛的支持。 - Jason Sperske

你可以通过编程方式滚动... - Banana

Answer 1

你不必允许手动滚动，可以通过编程实现滚动。只需获取自定义滚动条的位置并相应地滚动内容即可...

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

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

#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;
}

<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>

- Banana

---

这不是我想要的。我可以做到这一点。我想要的是隐藏垂直滚动条，但你仍然可以滚动，而且不是你所做的方式，但还是谢谢你尝试帮助我。 - Vinc199789

仍然是一样的，只需在可滚动部分添加事件监听器以监视鼠标滚轮移动或键盘箭头，并相应地进行程序化滚动。 - Banana

你知道如何通过JavaScript或Jquery检测滚动条向上或向下滚动吗？我自己制作了滚动条，但是检测滚动方向是我无法解决的唯一问题。 - Vinc199789

鼠标滚轮事件分别为"mousewheel"和在Firefox中为"DOMMouseScroll"。无论使用何种方式滚动，都可以通过"scroll"事件或jQuery的.scroll()方法来检测。您需要一个全局变量来保存滚动位置，并且每次滚动页面时都要检查位置是否比先前的值更大或更小，这样您就会知道滚动方向。 - Banana

Answer 2

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

scrollbar-width: none;

- Hari Hara

Answer 3

这是 CSS 代码：

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

同时请参阅 webkit.org 上的 开发者文档。

- Cuup

---

你知道 WebKit 不是唯一的浏览引擎，对吧？ - Ryan

Answer 4

最佳方法是使用jQuery插件。

最具自定义性和灵活性的插件是jScrollPane，它适用于垂直和水平滚动，并允许您通过对句柄、轨道、包装器等元素应用样式来轻松地进行CSS样式设计。请注意，滚动条需要进行样式设计，因为默认情况下它们非常丑陋。

如果您想要更漂亮的东西，请尝试perfect-scrollbar，它可以很好地模拟滚动条的行为，看起来像Mac OS X上的那些（美观而薄，只有在需要时才可见）。

我还使用过jQuery-slimScroll，它也做得很好。轻巧易用，外观漂亮，易于样式设计，但不如第一个插件自定义化程度高。

理论上也可以仅使用CSS隐藏滚动条，但这是非常hacky且用户体验很差的方法。我肯定会选择使用jQuery插件解决方案，因为它们将自行处理默认滚动条。

- bwitkowicz