如何通過CSS去除滾動條中的箭頭

通常在滾動條中，垂直滾動條兩端都會有上下箭頭。如何通過CSS去除滾動條中的箭頭

無論如何刪除它，以便只有滾動條出現，而不是兩端的箭頭。下面是我的CSS：

.scrollbar-vertical 
{ 
    top: 0; 
    right: 0; 
    width: 17px; 
    height: 100%; 
    overflow-x: hidden; 
    scrollbar-3dlight-color:#999; 
    scrollbar-arrow-color:white; 
    scrollbar-base-color:white; 
    scrollbar-face-color:#999; 
    border-radius:5px 5px; 
}

來源

2013-07-20 ckv

如果我理解正確，你試圖獲得一個自定義滾動條，它仍然能夠滾動頁面，對不對？如果是這樣，我推薦https://github.com/inuyaksa/jquery.nicescroll它是非常可定製的，並且也可以在移動設備上運行。 – 2013-07-20 04:18:17

可能的解決方案在這裏：http://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div – 2013-07-20 04:19:40

你也可以試試這個：http://manos.malihu.gr/tuts/custom- scrollbar-plugin/complete_examples.html – Miro

通過假設您要自定義瀏覽器的滾動條，

你可以用一些不錯的jQuery插件很容易地做到這一點，或者你可以用CSS做的魔力。但它只能在WebKit瀏覽器，現在，這裏是如何

::-webkit-scrollbar { 
    width: 12px; 
} 

/* Track */ 
::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 

/* Handle */ 
::-webkit-scrollbar-thumb { 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 
::-webkit-scrollbar-thumb:window-inactive { 
    background: rgba(255,0,0,0.4); 
}

來源：http://css-tricks.com/custom-scrollbars-in-webkit/

否則，您可以使用插件。（推薦）

正如在早期的評論，我建議你使用niceScroller插件。這很好，很容易。

來源：http://areaaperta.com/nicescroll/

簡單實現

<script> 

    $(document).ready(

     function() { 

     $("html").niceScroll(); 

     } 

    ); 

</script>

來源

2013-07-20 07:49:34

-2

visibility: collapse !important;

可能？

來源

2013-07-20 04:15:44

不這麼認爲。我想即使實際的滾動條欄不顯示。我只是想要上下箭頭不顯示。 – ckv

@ckv使用我在第一條評論中推薦的基於JavaScript的解決方案，您將爲自己節省很多麻煩。有關詳情，請參閱Revolt的評論。 – 2013-07-20 04:21:57

您可以使用下面的風格在你的CSS隱藏滾動條箭頭，

::-moz-scrollbar-button:decrement, 
::-moz-scrollbar-button:increment, 
::-webkit-scrollbar-button:decrement, 
::-webkit-scrollbar-button:increment { 
    width: 0px; 
}

或

::-moz-scrollbar-button, ::-webkit-scrollbar-button { 
    width: 0px; 
}

來源

2018-02-15 09:16:46

如何通過CSS去除滾動條中的箭頭

回答

相關問題