如何通过CSS删除滚动条中的箭头 [英] How to remove the arrows in a scroll bar through CSS

问题描述

通常在一个滚动条中，垂直滚动条两端都会有上下箭头。

无论如何删除它只会出现滚动条而不是两端的箭头。下面是我的CSS：

  .scrollbar-vertical 
 {
 top：0; 
 right：0; 
 width：17px; 
身高：100％; 
 overflow-x：hidden; 
 scrollbar-3dlight-color：＃999; 
 scrollbar-arrow-color：white; 
 scrollbar-base-color：white; 
 scrollbar-face-color：＃999; 
 border-radius：5px 5px; 
 
  

解决方案

假设您想要自定义浏览器滚动条，

您可以使用一些很好的Jquery插件轻松完成此操作，或者您可以使用CSS来实现这一功能。但它现在只适用于webkit浏览器，下面是如何操作：

$ p $ :: - webkit-scrollbar {
width： 12像素;

$ b $ * Track * /
:: - webkit-scrollbar-track {
-webkit-box-shadow：inset 0 0 6px rgba（0， 0,0,0.3）;
-webkit-border-radius：10px;
border-radius：10px;
}

/ *句柄* /
:: - 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> 
 $ b $（document）.ready（
 
 function（）{
 
 $（html）。niceScroll（）; 
 
} 
 
）; 
 
< / script> 
  

Generally in a scroll bar there will be up and down arrows at both ends in a vertical scroll bar.

Is there anyway to remove it so that only the scroll bar appears and not the arrows at both ends. Below is my 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; 
}

解决方案

By Assuming that you want to customize the browser scrollbar,

You can do this easily with some nice Jquery Plugins, or you can do the magic with css. But it only works on webkit browsers for now, Here is how

::-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); 
}

Source: http://css-tricks.com/custom-scrollbars-in-webkit/

Else you can use a plugin. (Recommended)

As in an early comment, i suggest you use the niceScroller Plugin. That's nice and easy.

Source : http://areaaperta.com/nicescroll/

Simple Implementation

<script> 

     $(document).ready(

      function() { 

        $("html").niceScroll();

      }

    );

</script>

这篇关于如何通过CSS删除滚动条中的箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！