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

Question

我想制作自己的滚动条，但要完成它，我首先需要隐藏默认滚动条但允许滚动。

我已经试过了:

overflow-y:hidden;

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

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

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>