你如何隱藏滾動條但允許滾動？

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> 

Answer 2

您可以隱藏滾動條，但允許使用以下屬性在Firefox中滾動：

scrollbar-width: none;

Answer 3

最好的方法是使用jQuery插件。

最可定制和靈活的是jScrollPane ，它適用於垂直和水平滾動，並允許您通過將樣式應用於句柄，軌道，包裝等元素，使用CSS輕松地設置樣式。請注意，滾動條確實需要樣式，因為它們非常難看的盒子。

如果你想要更漂亮的東西嘗試完美滾動條 ，它很好地模仿滾動條的行為看起來像Mac OS X上的那些（好的和東西，僅在需要時可見）。

我也使用過jQuery-slimScroll ，它也很好地完成了這項工作。 輕巧，易於使用，外觀美觀，易於設計，但不像第一個那樣可定制。

理論上也可以僅使用CSS隱藏滾動條，但這對於用戶體驗來說非常糟糕且非常糟糕。 我肯定會使用jQuery插件解決方案，因為他們將自己處理默認滾動條。

Answer 4

這是CSS：

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

另請參閱webkit.org上的開發人員文檔 。