如何解决滚动条样式问题


本文摘自PHP中文网,作者一个新手,侵删。

相信很多同仁都曾为各种浏览器的滚动条样式困惑过,而且不同的浏览器默认的滚动条样式还不一致。网上也有很多说法修改滚动条样式,但是大多数都是滥竽充数。今天我只说干货,纯干货,干货来自于我的一位同事的推荐,在此,感谢同事,谢谢。

第一步:你需要在样式<style></style>标签中插入如下代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

/* 设置滚动条的样式 */

    ::-webkit-scrollbar {

        width: 5px;

        height: 5px;

    }

    /* 滚动槽 */

    ::-webkit-scrollbar-track {

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

        border-radius: 5px;

    }

    /* 滚动条滑块 */

    ::-webkit-scrollbar-thumb {

        border-radius: 10px;

        background: rgba(0, 0, 0, 0.1);

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

    }

第二步:给容器加样式

overflow:auto;(或者overflow-y:auto;或者overflow-x:auto;)

效果就不贴出来了,让你亲自见证奇迹的时刻!没效果欢迎丢砖~

以上就是如何解决滚动条样式问题 的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

react中如何引入css样式

div怎样设置边框和透明度样式

html设置表格边框样式

如何解决滚动条样式问题

怎么给span标记样式设置width属性

在html元素中设置css样式的方式是什么

分享一个用canvas合成海报图片的移动端项目

css样式重置

vue.js怎么改变样式

jquery怎么设置属性和样式

更多相关阅读请进入《问题》频道 >>




打赏

取消

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

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

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

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...