自定义谷歌浏览器滚动条

最新推荐文章于 2023-04-14 17:50:45 发布

weixin_34268843

最新推荐文章于 2023-04-14 17:50:45 发布

阅读量93

点赞数

文章标签： javascript 前端 php ViewUI

原文链接：http://www.cnblogs.com/buyunqian/p/5505507.html

版权

::-webkit-scrollbar 滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。

::-webkit-scrollbar-button 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。

::-webkit-scrollbar-track 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。

::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）。

::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分

::-webkit-scrollbar-corner 边角

::-webkit-resizer 定义右下角拖动块的样式

    <!DOCTYPE html> 
  
    <html lang="en"> 
  
    <head> 
  
        <meta charset="UTF-8"> 
  
        <title>自定义滚动条</title> 
  
        <style type="text/css"> 
  
            #scroll-1 { 
  
                width:300px; 
  
                height:200px; 
  
                /*overflow: auto;*/ 
  
                overflow-y:scroll; 
  
                margin:70px auto; 
  
                scrollbar-track-color:red; 
  
                scrollbar-arrow-color:blue; 
  
            } 
  
            #scroll-1 div { 
  
                width:200px; 
  
                height:400px; 
  
            }    
  
            #scroll-1::-webkit-scrollbar {width:10px;height:10px;} 
  
            /*#scroll-1::-webkit-scrollbar-button {background-color:#FF7677;}*/ 
  
            /*#scroll-1::-webkit-scrollbar-track  {background:red;}*/ 
  
            #scroll-1::-webkit-scrollbar-track-piece { background:#ddd} 
  
            #scroll-1::-webkit-scrollbar-thumb{ background:#FFA711;border-radius:4px;} 
  
            /*#scroll-1::-webkit-scrollbar-corner {background:red;}*/ 
  
            /*#scroll-1::-webkit-scrollbar-resizer  {background:red;}*/ 
  
        </style> 
  
    </head> 
  
    <body> 
  
        <div id='scroll-1'> 
  
            <div > 
  
                <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。</p> 
  
                <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。</p> 
  
                <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。</p> 
  
                <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。</p> 
  
                <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。</p> 
  
            </div> 
  
        </div> 
  
    </body> 
  
    </html>

转载于:https://www.cnblogs.com/buyunqian/p/5505507.html

weixin_34268843

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义谷歌浏览器滚动条

::-webkit-scrollbar 滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。 ::-webkit-scrollbar-button 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。 ::-webkit-scrollba...
复制链接

扫一扫