HTML自定义滚动条


自定义滚动条

在web前端非常火爆的今天,好的界面可以给人们很好的体验。浏览器的滚动条总是千篇一律,那么滚动条是否可以自定义呢?网上好多自定义滚动条通过CSS样式来设置的,但是这种做法只有IE支持,那么谷歌浏览器是否也可以自定义滚动条呢? 

前一段时间浏览网易邮箱的时候发现它上面的滚动条挺不错的,如下图:



从上图可以看出网易126邮箱的滚动条是这种纤细的滚动条,那么它是怎么实现的呢,赶紧F12看看人家的代码,学习完了给大家分享分享。


它是使用CSS中的伪元素来实现的,主要由以下三个来完成: 

1. -webkit-scrollbar:定义滚动条的样式,如长宽。 

2. -webkit-scrollbar-thumbnail:定义滚动条上滑块的样式。 

3. -webkit-scrollbar-track:定义滚动条主干部分(背景)的样式。


接下来我们就把它的核心代码拿下来瞧瞧。


滚动条样式

.nui-scroll::-webkit-scrollbar {

    width: 8px;//表示垂直滚动条的宽度

    height: 8px;//表示水平滚动条的高度

}

可以看出给了一个nui-scroll这么一个类选择器,然后设置滚动条的样式。width和height的含义上面已经给出了。


滚动条滑块样式

/*正常情况下滑块的样式*/

.nui-scroll::-webkit-scrollbar-thumbnail {

    background-color: rgba(0,0,0,.05);

    border-radius: 10px;

    -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);

}

/*鼠标悬浮在该类指向的控件上时滑块的样式*/

.nui-scroll:hover::-webkit-scrollbar-thumbnail {

    background-color: rgba(0,0,0,.2);

    border-radius: 10px;

    -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);

}

/*鼠标悬浮在滑块上时滑块的样式*/

.nui-scroll::-webkit-scrollbar-thumbnail:hover {

  background-color: rgba(0,0,0,.4);

    -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);

}


滑块的样式也很简单。


滚动条主干部分样式

/*正常时候的主干部分*/

.nui-scroll::-webkit-scrollbar-track {

    border-radius: 10px;

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);

    background-color: white;

}

/*鼠标悬浮在滚动条上的主干部分*/

.nui-scroll::-webkit-scrollbar-track:hover {

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.4);

    background-color: rgba(0,0,0,.01);

}

我们的代码基本上就完了,最后设置一下该控件显示滚动条,要显示滚动条那么就得给定它的宽和高并且设置其样式overflow为auto。


显示滚动条

.nui-scroll{

    margin-left: 100px;/*为了咱们看着好看就向右移动一点*/

    border: 1px solid #000;/*给个边框看着更舒服*/

    width: 200px;/*设置宽*/

    height: 500px;/*设置高*/

    overflow: auto;/*当内容溢出时显示滚动条*/

}

有了上面的类,我们再定义一个DIV使用该类就大功告成了!


    123

    123

   


最后我们运行一下看看结果:


完整代码:


   

   

滚动条示例

   

        .nui-scroll{

            margin-left: 100px;

            border: 1px solid #000; 

            width: 200px;

            height: 500px;

            overflow: auto;

        }

        .nui-scroll::-webkit-scrollbar {

            width: 8px;

            height: 8px;

        }

        /*正常情况下滑块的样式*/

        .nui-scroll::-webkit-scrollbar-thumbnail {

            background-color: rgba(0,0,0,.05);

            border-radius: 10px;

            -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);

        }

        /*鼠标悬浮在该类指向的控件上时滑块的样式*/

        .nui-scroll:hover::-webkit-scrollbar-thumbnail {

            background-color: rgba(0,0,0,.2);

            border-radius: 10px;

            -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);

        }

        /*鼠标悬浮在滑块上时滑块的样式*/

        .nui-scroll::-webkit-scrollbar-thumbnail:hover {

            background-color: rgba(0,0,0,.4);

            -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);

        }

        /*正常时候的主干部分*/

        .nui-scroll::-webkit-scrollbar-track {

            border-radius: 10px;

            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);

            background-color: white;

        }

        /*鼠标悬浮在滚动条上的主干部分*/

        .nui-scroll::-webkit-scrollbar-track:hover {

            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.4);

            background-color: rgba(0,0,0,.01);

        }

   



   

        123

        123

       

   

热门文章

  • 体育总局冬运中心关于选派2023-2024赛季全国高山滑雪锦标赛暨第十四届全国冬季运动会高山滑雪资格赛技术官员的函
  • 体育总局冬运中心关于发布2023-2024赛季全国自由式及单板滑雪U型场地冠军赛竞赛规程的通知
  • 体育总局冬运中心关于发布2023-2024赛季全国自由式及单板滑雪大跳台和坡面障碍技巧冠军赛竞赛规程的通知
  • 体育总局冬运中心关于公示第十四届全国冬季运动会越野滑雪项目参赛运动员名单的函
  • 体育总局冬运中心关于公示第十四届全国冬季运动会自由式滑雪空中技巧、雪上技巧项目决赛参赛运动员名单的通知
  • 体育总局冬运中心关于公示第十四届全国冬季运动会自由式滑雪雪上技巧项目决赛参赛运动员名单的通知
  • 体育总局冬运中心关于公示第十四届全国冬季运动会单板滑雪U型场地等项目参赛运动员名单的函
  • 体育总局冬运中心关于公布第十四届全国冬季运动会高山滑雪项目决赛参赛运动员名单的通知
  • 体育总局冬运中心关于公示第十四届全国冬季运动会冬季两项项目参赛运动员名单的函
  • 2023-2024赛季全国自由式滑雪雪上技巧冠军赛竞赛规程
  • 2023-2024赛季全国冬季两项冠军赛竞赛规程
  • 2023-2024赛季全国越野滑雪冠军赛竞赛规程
  • 2023-2024赛季全国北欧两项冠军赛竞赛规程
  • 关于公布第十四届全国冬季运动会北欧两项参赛运动员名单的通知
  • 体育总局冬运中心关于公示第十四届全国冬季运动会跳台滑雪项目参赛运动员名单的函