更改网页内滚动条效果

Posted mirage-mc

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了更改网页内滚动条效果相关的知识,希望对你有一定的参考价值。


/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

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


/*定义滚动条轨道*/

::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}


/*定义滑块 内阴影+圆角*/

::-webkit-scrollbar-thumb {
    background-color: #0093ff;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, transparent 75%, transparent);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}

本站点应用的滚动条样式即为上述描写,将上述css代码块复制到对应站点里应用即可。

以上是关于更改网页内滚动条效果的主要内容,如果未能解决你的问题,请参考以下文章

如何使网页的背景图片不随着滚动条移动 使背景图片固定?(要代码)

如何在 MS Word 文档中显示代码片段,因为它在 *** 中显示(滚动条和灰色背景)

如何给网页右侧的滚动条修改颜色

炫酷 CSS 背景效果的 10 个代码片段

网页滚动条滚动到一定位置后,加载数据,而且数据是由动态效果的怎么做?

滚动条调整页面大小