1. 首页
  2. 问答
  3. 如何更改网页上滚动条的颜色？

如何更改网页上滚动条的颜色？

2017-05-29 66 views

回答

0

我想你在发布这个问题之前没有做足够的研究。

无论如何，我离开这里一个link这是由CSS完成。

请在发布问题之前进行调查。

来源

2017-05-29 16:20:31

2

你可以用CSS

body::-webkit-scrollbar { 
width: 1em; 
} 
body::-webkit-scrollbar-track { 
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); 
} 
body::-webkit-scrollbar-thumb { 
background-color: red; 
outline: 1px solid darkgrey; 
}

来源

2017-05-29 16:24:30

1 
enter code here 


$(document).ready(function() { 
 
      if (!$.browser.webkit) { 
 
       $('.wrapper').html('<p>Sorry! Non webkit users. :(</p>'); 
 
      } 
 
     });
header 
 
{ 
 
\t font-family: 'Lobster', cursive; 
 
\t text-align: center; 
 
\t font-size: 25px; \t 
 
} 
 

 
#info 
 
{ 
 
\t font-size: 18px; 
 
\t color: #555; 
 
\t text-align: center; 
 
\t margin-bottom: 25px; 
 
} 
 

 
a{ 
 
\t color: #074E8C; 
 
} 
 

 
.scrollbar 
 
{ 
 
\t margin-left: 30px; 
 
\t float: left; 
 
\t height: 300px; 
 
\t width: 65px; 
 
\t background: #F5F5F5; 
 
\t overflow-y: scroll; 
 
\t margin-bottom: 25px; 
 
} 
 

 
.force-overflow 
 
{ 
 
\t min-height: 450px; 
 
} 
 

 
#wrapper 
 
{ 
 
\t text-align: center; 
 
\t width: 500px; 
 
\t margin: auto; 
 
} 
 

 
/* 
 
* STYLE 1 
 
*/ 
 

 
#style-1::-webkit-scrollbar-track 
 
{ 
 
\t -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
\t border-radius: 10px; 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#style-1::-webkit-scrollbar 
 
{ 
 
\t width: 12px; 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#style-1::-webkit-scrollbar-thumb 
 
{ 
 
\t border-radius: 10px; 
 
\t -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
 
\t background-color: #555; 
 
} 
 

 
/* 
 
* STYLE 2 
 
*/ 
 

 
#style-2::-webkit-scrollbar-track 
 
{ 
 
\t -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
\t border-radius: 10px; 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#style-2::-webkit-scrollbar 
 
{ 
 
\t width: 12px; 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#style-2::-webkit-scrollbar-thumb 
 
{ 
 
\t border-radius: 10px; 
 
\t -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
 
\t background-color: #D62929; 
 
} 
 

 
/* 
 
* STYLE 3 
 
*/ 
 

 
#style-3::-webkit-scrollbar-track 
 
{ 
 
\t -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#style-3::-webkit-scrollbar 
 
{ 
 
\t width: 6px; 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#style-3::-webkit-scrollbar-thumb 
 
{ 
 
\t background-color: #000000; 
 
} 
 

 
/* 
 
* STYLE 4 
 
*/ 
 

 
#style-4::-webkit-scrollbar-track 
 
{ 
 
\t -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#style-4::-webkit-scrollbar 
 
{ 
 
\t width: 10px; 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#style-4::-webkit-scrollbar-thumb 
 
{ 
 
\t background-color: #000000; 
 
\t border: 2px solid #555555; 
 
} 
 

 

 
/* 
 
* STYLE 5 
 
*/ 
 

 
#style-5::-webkit-scrollbar-track 
 
{ 
 
\t -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#style-5::-webkit-scrollbar 
 
{ 
 
\t width: 10px; 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#style-5::-webkit-scrollbar-thumb 
 
{ 
 
\t background-color: #0ae; 
 
\t 
 
\t background-image: -webkit-gradient(linear, 0 0, 0 100%, 
 
\t     color-stop(.5, rgba(255, 255, 255, .2)), 
 
\t \t \t \t \t color-stop(.5, transparent), to(transparent)); 
 
} 
 

 

 
/* 
 
* STYLE 6 
 
*/ 
 

 
#style-6::-webkit-scrollbar-track 
 
{ 
 
\t -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#style-6::-webkit-scrollbar 
 
{ 
 
\t width: 10px; 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#style-6::-webkit-scrollbar-thumb 
 
{ 
 
\t background-color: #F90; \t 
 
\t background-image: -webkit-linear-gradient(45deg, 
 
\t           rgba(255, 255, 255, .2) 25%, 
 
\t \t \t \t \t \t \t \t \t \t \t transparent 25%, 
 
\t \t \t \t \t \t \t \t \t \t \t transparent 50%, 
 
\t \t \t \t \t \t \t \t \t \t \t rgba(255, 255, 255, .2) 50%, 
 
\t \t \t \t \t \t \t \t \t \t \t rgba(255, 255, 255, .2) 75%, 
 
\t \t \t \t \t \t \t \t \t \t \t transparent 75%, 
 
\t \t \t \t \t \t \t \t \t \t \t transparent) 
 
} 
 

 

 
/* 
 
* STYLE 7 
 
*/ 
 

 
#style-7::-webkit-scrollbar-track 
 
{ 
 
\t -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
\t background-color: #F5F5F5; 
 
\t border-radius: 10px; 
 
} 
 

 
#style-7::-webkit-scrollbar 
 
{ 
 
\t width: 10px; 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#style-7::-webkit-scrollbar-thumb 
 
{ 
 
\t border-radius: 10px; 
 
\t background-image: -webkit-gradient(linear, 
 
\t \t \t \t \t \t \t \t \t left bottom, 
 
\t \t \t \t \t \t \t \t \t left top, 
 
\t \t \t \t \t \t \t \t \t color-stop(0.44, rgb(122,153,217)), 
 
\t \t \t \t \t \t \t \t \t color-stop(0.72, rgb(73,125,189)), 
 
\t \t \t \t \t \t \t \t \t color-stop(0.86, rgb(28,58,148))); 
 
} 
 

 
/* 
 
* STYLE 8 
 
*/ 
 

 
#style-8::-webkit-scrollbar-track 
 
{ 
 
\t border: 1px solid black; 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#style-8::-webkit-scrollbar 
 
{ 
 
\t width: 10px; 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#style-8::-webkit-scrollbar-thumb 
 
{ 
 
\t background-color: #000000; \t 
 
} 
 

 

 
/* 
 
* STYLE 9 
 
*/ 
 

 
#style-9::-webkit-scrollbar-track 
 
{ 
 
\t -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#style-9::-webkit-scrollbar 
 
{ 
 
\t width: 10px; 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#style-9::-webkit-scrollbar-thumb 
 
{ 
 
\t background-color: #F90; \t 
 
\t background-image: -webkit-linear-gradient(90deg, 
 
\t           rgba(255, 255, 255, .2) 25%, 
 
\t \t \t \t \t \t \t \t \t \t \t transparent 25%, 
 
\t \t \t \t \t \t \t \t \t \t \t transparent 50%, 
 
\t \t \t \t \t \t \t \t \t \t \t rgba(255, 255, 255, .2) 50%, 
 
\t \t \t \t \t \t \t \t \t \t \t rgba(255, 255, 255, .2) 75%, 
 
\t \t \t \t \t \t \t \t \t \t \t transparent 75%, 
 
\t \t \t \t \t \t \t \t \t \t \t transparent) 
 
} 
 

 

 
/* 
 
* STYLE 10 
 
*/ 
 

 
#style-10::-webkit-scrollbar-track 
 
{ 
 
\t -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
\t background-color: #F5F5F5; 
 
\t border-radius: 10px; 
 
} 
 

 
#style-10::-webkit-scrollbar 
 
{ 
 
\t width: 10px; 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#style-10::-webkit-scrollbar-thumb 
 
{ 
 
\t background-color: #AAA; 
 
\t border-radius: 10px; 
 
\t background-image: -webkit-linear-gradient(90deg, 
 
\t           rgba(0, 0, 0, .2) 25%, 
 
\t \t \t \t \t \t \t \t \t \t \t transparent 25%, 
 
\t \t \t \t \t \t \t \t \t \t \t transparent 50%, 
 
\t \t \t \t \t \t \t \t \t \t \t rgba(0, 0, 0, .2) 50%, 
 
\t \t \t \t \t \t \t \t \t \t \t rgba(0, 0, 0, .2) 75%, 
 
\t \t \t \t \t \t \t \t \t \t \t transparent 75%, 
 
\t \t \t \t \t \t \t \t \t \t \t transparent) 
 
} 
 

 

 
/* 
 
* STYLE 11 
 
*/ 
 

 
#style-11::-webkit-scrollbar-track 
 
{ 
 
\t -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
\t background-color: #F5F5F5; 
 
\t border-radius: 10px; 
 
} 
 

 
#style-11::-webkit-scrollbar 
 
{ 
 
\t width: 10px; 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#style-11::-webkit-scrollbar-thumb 
 
{ 
 
\t background-color: #3366FF; 
 
\t border-radius: 10px; 
 
\t background-image: -webkit-linear-gradient(0deg, 
 
\t           rgba(255, 255, 255, 0.5) 25%, 
 
\t \t \t \t \t \t \t \t \t \t \t transparent 25%, 
 
\t \t \t \t \t \t \t \t \t \t \t transparent 50%, 
 
\t \t \t \t \t \t \t \t \t \t \t rgba(255, 255, 255, 0.5) 50%, 
 
\t \t \t \t \t \t \t \t \t \t \t rgba(255, 255, 255, 0.5) 75%, 
 
\t \t \t \t \t \t \t \t \t \t \t transparent 75%, 
 
\t \t \t \t \t \t \t \t \t \t \t transparent) 
 
} 
 

 
/* 
 
* STYLE 12 
 
*/ 
 

 
#style-12::-webkit-scrollbar-track 
 
{ 
 
\t -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9); 
 
\t border-radius: 10px; 
 
\t background-color: #444444; 
 
} 
 

 
#style-12::-webkit-scrollbar 
 
{ 
 
\t width: 12px; 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#style-12::-webkit-scrollbar-thumb 
 
{ 
 
\t border-radius: 10px; 
 
\t background-color: #D62929; 
 
\t background-image: -webkit-linear-gradient(90deg, 
 
\t \t \t \t \t \t \t \t \t \t \t transparent, 
 
\t \t \t \t \t \t \t \t \t \t \t rgba(0, 0, 0, 0.4) 50%, 
 
\t \t \t \t \t \t \t \t \t \t \t transparent, 
 
\t \t \t \t \t \t \t \t \t \t \t transparent) 
 
} 
 

 
/* 
 
* STYLE 13 
 
*/ 
 

 
#style-13::-webkit-scrollbar-track 
 
{ 
 
\t -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9); 
 
\t border-radius: 10px; 
 
\t background-color: #CCCCCC; 
 
} 
 

 
#style-13::-webkit-scrollbar 
 
{ 
 
\t width: 12px; 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#style-13::-webkit-scrollbar-thumb 
 
{ 
 
\t border-radius: 10px; 
 
\t background-color: #D62929; 
 
\t background-image: -webkit-linear-gradient(90deg, 
 
\t \t \t \t \t \t \t \t \t \t \t transparent, 
 
\t \t \t \t \t \t \t \t \t \t \t rgba(0, 0, 0, 0.4) 50%, 
 
\t \t \t \t \t \t \t \t \t \t \t transparent, 
 
\t \t \t \t \t \t \t \t \t \t \t transparent) 
 
} 
 

 
/* 
 
* STYLE 14 
 
*/ 
 

 
#style-14::-webkit-scrollbar-track 
 
{ 
 
\t -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6); 
 
\t background-color: #CCCCCC; 
 
} 
 

 
#style-14::-webkit-scrollbar 
 
{ 
 
\t width: 10px; 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#style-14::-webkit-scrollbar-thumb 
 
{ 
 
\t background-color: #FFF; 
 
\t background-image: -webkit-linear-gradient(90deg, 
 
\t           rgba(0, 0, 0, 1) 0%, 
 
\t \t \t \t \t \t \t \t \t \t \t rgba(0, 0, 0, 1) 25%, 
 
\t \t \t \t \t \t \t \t \t \t \t transparent 100%, 
 
\t \t \t \t \t \t \t \t \t \t \t rgba(0, 0, 0, 1) 75%, 
 
\t \t \t \t \t \t \t \t \t \t \t transparent) 
 
} 
 

 
/* 
 
* STYLE 15 
 
*/ 
 

 
#style-15::-webkit-scrollbar-track 
 
{ 
 
\t -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); 
 
\t background-color: #F5F5F5; 
 
\t border-radius: 10px; 
 
} 
 

 
#style-15::-webkit-scrollbar 
 
{ 
 
\t width: 10px; 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#style-15::-webkit-scrollbar-thumb 
 
{ 
 
\t border-radius: 10px; 
 
\t background-color: #FFF; 
 
\t background-image: -webkit-gradient(linear, 
 
\t \t \t \t \t \t \t \t \t 40% 0%, 
 
\t \t \t \t \t \t \t \t \t 75% 84%, 
 
\t \t \t \t \t \t \t \t \t from(#4D9C41), 
 
\t \t \t \t \t \t \t \t \t to(#19911D), 
 
\t \t \t \t \t \t \t \t \t color-stop(.6,#54DE5D)) 
 
} 
 

 
/* 
 
* STYLE 16 
 
*/ 
 

 
#style-16::-webkit-scrollbar-track 
 
{ 
 
\t -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); 
 
\t background-color: #F5F5F5; 
 
\t border-radius: 10px; 
 
} 
 

 
#style-16::-webkit-scrollbar 
 
{ 
 
\t width: 10px; 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#style-16::-webkit-scrollbar-thumb 
 
{ 
 
\t border-radius: 10px; 
 
\t background-color: #FFF; 
 
\t background-image: -webkit-linear-gradient(top, 
 
\t \t \t \t \t \t \t \t \t \t \t #e4f5fc 0%, 
 
\t \t \t \t \t \t \t \t \t \t \t #bfe8f9 50%, 
 
\t \t \t \t \t \t \t \t \t \t \t #9fd8ef 51%, 
 
\t \t \t \t \t \t \t \t \t \t \t #2ab0ed 100%); 
 
}
<div id="wrapper"> 
 
    <div class="scrollbar" id="style-default"> 
 
    <div class="force-overflow"></div> 
 
    </div> 
 

 
<div class="scrollbar" id="style-1"> 
 
    <div class="force-overflow"></div> 
 
</div> 
 

 
    <div class="scrollbar" id="style-2"> 
 
     <div class="force-overflow"></div> 
 
    </div> 
 

 
    <div class="scrollbar" id="style-3"> 
 
     <div class="force-overflow"></div> 
 
    </div> 
 

 
    <div class="scrollbar" id="style-4"> 
 
     <div class="force-overflow"></div> 
 
    </div> 
 

 
    <div class="scrollbar" id="style-5"> 
 
     <div class="force-overflow"></div> 
 
    </div> 
 

 
    <div class="scrollbar" id="style-6"> 
 
     <div class="force-overflow"></div> 
 
    </div> 
 

 
    <div class="scrollbar" id="style-7"> 
 
     <div class="force-overflow"></div> 
 
    </div> 
 

 
    <div class="scrollbar" id="style-8"> 
 
     <div class="force-overflow"></div> 
 
    </div> 
 

 
    <div class="scrollbar" id="style-9"> 
 
     <div class="force-overflow"></div> 
 
    </div> 
 

 
    <div class="scrollbar" id="style-10"> 
 
     <div class="force-overflow"></div> 
 
    </div> 
 

 
    <div class="scrollbar" id="style-11"> 
 
     <div class="force-overflow"></div> 
 
    </div> 
 

 
    <div class="scrollbar" id="style-13"> 
 
     <div class="force-overflow"></div> 
 
    </div> 
 

 
    <div class="scrollbar" id="style-14"> 
 
     <div class="force-overflow"></div> 
 
    </div> 
 

 
    <div class="scrollbar" id="style-15"> 
 
     <div class="force-overflow"></div> 
 
    </div> 
 
</div>

来源

2017-05-29 16:24:47 Arun

1

改变滚动条的颜色是有点棘手做到这一点。您可以使用特定的CSS规则来做到这一点，但这将取决于您使用的浏览器。

为了解决这个问题，有大量的JavaScript插件隐藏了原来的滚动条，并设置了一个由html元素创建的新插件，这个插件是完全可定制的。例如，您可以查看this。

来源

2017-05-29 16:25:32

+0

感谢您的回答，我真的很新，就像我几个月前开始的 – CrossoverKarik

+0

我很高兴我帮助 –

2

您可能会使用SlimScroll。它也比添加颜色更有帮助。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 

    <script type="text/javascript" src="http://rocha.la/misc/jsdemos/slimScroll/jquery.slimscroll.js"></script> 


<script> 
    $(function() { 
     $('#id_of_div_you_need_scroll').slimScroll({ 
     width: '300px', 
     height: '200px', 
     color: '#ffcc00', 
     /* size: '10px', 
     position: 'left', 
     alwaysVisible: true, 
     distance: '20px', 
     start: $('#child_image_element'), 
     railVisible: true, 
     railColor: '#222', 
     railOpacity: 0.3, 
     wheelStep: 10, 
     allowPageScroll: false, 
     disableFadeOut: false*/ 
     }); 
    }); 
    </script>

来源

2017-05-29 16:31:15 AdhershMNair

相关问题

 相关问题