如何通过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去除滚动条中的箭头

回答

相关问题