欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

361模板网

当前位置:361模板网 > 技术文档 > 程序代码 > CSS小课堂:CSS自定义页面滚动条
这篇文章主要为大家详细介绍了CSS小课堂:CSS自定义页面滚动条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

每个浏览器的页面都会自带页面滚动条,但是不是用户比较喜欢特立独行、与众不同,会要求361模板在做织梦模板开发的时候,改变这一点,做成自己个性的页面滚动条。

CSS自定义页面滚动条

上图就是某个页面的滚动条效果,当然了,这样的效果也是可以做到某个特定的容器里的,例如某个DIV容器里,都是可以实现的,实现代码如下:

1、CSS修改整体页面的滚动条效果代码

body::-webkit-scrollbar {/*滚动条整体样式*/
    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
body::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #535353;
}
body::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #EDEDED;
}

2、CSS修改某个容器的滚动条代码

ke361::-webkit-scrollbar {/*滚动条整体样式*/
    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.ke361::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #535353;
}
.ke361::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #EDEDED;
}

提醒一下

需要在容器 div 上加个样式 class=”ke361”就可以了。


以上就是CSS小课堂:CSS自定义页面滚动条的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: css 页面滚动条

上一篇CSS小课堂:CSS实线CSS虚线的具体写法和注意点

下一篇CSS小课堂:CSS边框类样式代码书写介绍

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在