争怎路由网:是一个主要分享无线路由器安装设置经验的网站,汇总WiFi常见问题的解决方法。

如何用CSS更改浏览器滚动条的样式(案例详细说明)

时间:2024/2/28作者:未知来源:争怎路由网人气:

网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
随着互联网的发展,人们对页面的要求越来越高,不只是功能好用,而且还要颜值高。前端开发人员对于浏览器的滚动条并不陌生,当自带的一些滚动条无法满足我们的审美时,你知道如何用CSS修改浏览器滚动条的样式吗?今天就给大家介绍如何设置div滚动条样式。有需要的小伙伴可以参考一下。

我们在自定义滚动条样式前,首先要了解滚动条的结构。通俗来讲,滚动条由两部分组成:一部分是可以滑动的部分,我们称它为滑块;另一部分是滚动条的轨道,也就是滑块的轨道,一般来说,为了美观,滑块的颜色要比轨道的颜色深一些。

首先介绍滚动条相关的CSS代码,以及他们的含义

::-webkit-scrollbar:指滚动条整体部分,它的属性有width,height,background等
::-webkit-scrollbar-button : 指滚动条两边的按钮。当不需要时可以用display:none将其隐藏
::-webkit-scrollbar-track :指外层轨道部分,当不需要时可以用display:none将其隐藏,也可以添加你想要的颜色
::-webkit-scrollbar-track-piece :指内层轨道部分,即滚动条中间的部分
::-webkit-scrollbar-thumb : 指滚动条里面可以拖动的部分,也就是滑块
::-webkit-scrollbar-corner :指边角部分
::-webkit-resizer :他用来定义右下角滑块的样式

但是最常用的是滚动条整体部分(-webkit-scrollbar),滑块(-webkit-scrollbar-thumb)以及外轨道( -webkit-scrollbar-track)三部分。

接下来我们将div盒子里面超出的部分隐藏,给div设置滚动条样式,看看怎么用CSS实现滚动条样式。

HTML部分:

<div class="scroll">
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>
        have a nice day <br/>    
    </div>

CSS部分:

.scroll{
            margin:100px auto;
            border: 1px solid #000; 
            width: 200px;
            height: 300px;
            overflow: auto;
        }
        .scroll::-webkit-scrollbar {
            width: 10px;
           height: 10px;
        }
        /*正常情况下滑块的样式*/
        .scroll::-webkit-scrollbar-thumb {
            background-color: rgba(0,0,0,.05);
            border-radius: 10px;
            -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
        }
        /*鼠标悬浮在该类指向的控件上时滑块的样式*/
        .scroll:hover::-webkit-scrollbar-thumb {
           background-color: rgba(0,0,0,.2);
            border-radius: 10px;
            -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
        }
        /*鼠标悬浮在滑块上时滑块的样式*/
        .scroll::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0,0,0,.4);
            -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
        }
        /*正常时候的主干部分*/
        .scroll::-webkit-scrollbar-track {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
           background-color: white;
        }
        /*鼠标悬浮在滚动条上的主干部分*/
        .scroll::-webkit-scrollbar-track:hover {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.4);
            background-color: rgba(0,0,0,.01);
        }

效果图:

滚动条.jpg
注意:如果是水平滚动条,那么width属性不起作用,height可以设置滚动条的高度;如果是竖直滚动条,那么height高度不起作用,width可以用来设置滚动条的宽度。在工作中可以根据需要设置想要的样式,没有接触过得小伙伴可以多去尝试,加深对知识点的理解,希望可以帮助到你!

以上就是如何用CSS修改浏览器滚动条的样式(实例详解)的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



关键词:如何用CSS更改浏览器滚动条的样式(案例详细说明)




Copyright © 2012-2018 争怎路由网(http://www.zhengzen.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版