CSS修改滚动条

一、CSS修改滚动条的样式

修改滚动条的样式可以通过CSS的::-webkit-scrollbar伪元素或者 scrollbar-width 属性实现。以下是单独使用::-webkit-scrollbar的示例：

/* 隐藏滚动条 */
::-webkit-scrollbar {
    display: none;
}

/* 修改滚动条背景色 */
::-webkit-scrollbar {
    background-color: #F5F5F5;
}

/* 修改滚动条宽度 */
::-webkit-scrollbar {
    width: 12px;
}

/* 修改滚动条滑块颜色 */
::-webkit-scrollbar-thumb {
    background-color: #999;
}

以上代码中，::-webkit-scrollbar代表整个滚动条，::-webkit-scrollbar-thumb代表滑块，可以通过这两个伪元素完成滚动条的样式修改。如需同时修改滚动条样式和滑块样式，可以参考以下示例：

/* 修改滚动条和滑块背景颜色 */
::-webkit-scrollbar {
    background-color: #F5F5F5;
    width: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: #999;
}

二、CSS改变滚动条颜色

在修改滚动条样式的基础上，可以使用CSS的color属性来进一步改变滚动条的颜色。以下是示例代码：

/* 改变滚动条颜色 */
::-webkit-scrollbar {
    background-color: #F5F5F5;
    width: 12px;
    color: #999;
}

其中color属性用于修改滚动条的前景色，即滑块的颜色。

三、修改滚动条样式

除了修改颜色以外，还可以通过background-image等属性来修改滚动条的样式，例如：

/* 改变滚动条样式 */
::-webkit-scrollbar {
    background-color: #F5F5F5;
    width: 12px;
    background-image: -webkit-linear-gradient(#fff, #ddd);
}

这里使用了background-image属性和-webkit-linear-gradient属性值，将滚动条的背景设为一个渐变色。

四、CSS修改滚动条的位置

修改滚动条的位置可以分为两种情况，一种是垂直滚动条，另一种是水平滚动条。

对于垂直滚动条，可以使用CSS的::-webkit-scrollbar-track-piece伪元素来实现。以下是示例代码：

/* 修改垂直滚动条位置 */
::-webkit-scrollbar-track-piece {
    width: 12px;
    background-color: #F5F5F5;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
}

以上代码中，通过将::-webkit-scrollbar-track-piece设为绝对定位，并设置right、top和bottom属性，将滚动条放置于右侧。

对于水平滚动条，同样可以使用::-webkit-scrollbar-track-piece伪元素，只需要将属性值设置为bottom、left和right即可。以下是示例代码：

/* 修改水平滚动条位置 */
::-webkit-scrollbar-track-piece {
    height: 12px;
    background-color: #F5F5F5;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
}

五、CSS加滚动条

有时，我们需要的是在没有滚动条的情况下添加一个滚动条。这可以通过使用CSS3的overflow属性和::-webkit-scrollbar伪元素来实现。以下是示例代码：

/* 添加滚动条 */
div {
    height: 200px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

/* 修改滚动条样式 */
div::-webkit-scrollbar {
    width: 12px;
}

div::-webkit-scrollbar-thumb {
    background-color: #999;
}

以上代码中，首先通过overflow属性将元素设为可滚动，并通过-webkit-overflow-scrolling: touch;提高移动设备上滚动的流畅度。然后，通过标签选择器和::-webkit-scrollbar伪元素来修改滚动条的样式。

六、CSS修改滚动条放在屏幕的下方

有时，为了更好地适应页面布局，我们希望将滚动条放置在屏幕底部，以下是示例代码：

/* 将滚动条放在屏幕底部 */
::-webkit-scrollbar {
    position: fixed;
    z-index: 100;
    bottom: 0;
    width: 100%;
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: #999;
}

以上代码中，将::-webkit-scrollbar设为固定定位，并将bottom属性设为0，即可将滚动条放置在屏幕底部。同时，通过设置z-index属性，可以避免滚动条被其它元素遮挡。

七、火狐CSS修改滚动条样式

除了webkit内核的浏览器，火狐也提供了修改滚动条样式的方法，只需要使用::-moz-scrollbar伪元素即可。以下是示例代码：

/* 修改火狐滚动条样式 */
div::-moz-scrollbar {
    width: 12px;
}

div::-moz-scrollbar-thumb {
    background-color: #999;
}

八、CSS修改滚动条静止的时候隐藏

有时，我们希望在滚动停止时隐藏滚动条，可以使用<body>元素的scroll事件和CSS的visibility属性来实现，以下是示例代码：

/* 隐藏滚动条 */
body::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    visibility: hidden;
}

body::-webkit-scrollbar-thumb {
    background-color: #999;
}

/* 显示滚动条 */
body.scroll-finished::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    visibility: visible;
}

以上代码中，首先将::-webkit-scrollbar和::-webkit-scrollbar-thumb的visibility属性设为hidden，当滚动停止时，通过<body>元素的scroll事件将其设为visible即可。

九、CSS修改滚动条位置现是在指定位置

有时，我们需要将滚动条放置在页面的特定位置，这可以通过设置滚动容器的padding属性来实现。以下是示例代码：

/* 在指定位置放置滚动条 */
div {
    height: 200px;
    overflow: scroll;
    padding-right: 12px;
}

div::-webkit-scrollbar {
    width: 12px;
}

div::-webkit-scrollbar-thumb {
    background-color: #999;
}

以上代码中，通过设置div元素的padding-right属性，将滚动条放置在容器的右侧。注意，padding-right的值应该与::-webkit-scrollbar的width属性相等。

十、CSS滚动条样式选取

除了以上介绍的几种滚动条样式以外，还有很多种滚动条样式可供选择。以下是选取的三种滚动条样式：

1、仿Mac OS滚动条样式

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #fff;
}

::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #ccc;
    -webkit-box-shadow: inset 0 0 0 1px #fff;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #999;
    -webkit-box-shadow: inset 0 0 0 1px #fff;
}

2、iOS滚动条样式

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb:vertical {
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:horizontal {
    border-radius: 3px;
}

3、自定义滚动条样式

::-webkit-scrollbar {
    width: 8px;
    background-color: #fff;
}

::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 0 1px #fff;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #999;
    -webkit-box-shadow: inset 0 0 0 1px #fff;
}

::-webkit-scrollbar-thumb:active {
    background-color: #666;
}

以上是使用webkit内核浏览器的示例，对于其他浏览器，可以调整对应样式实现滚动条的修改。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/253529.html