CSS 自定义滚动条样式

最新推荐文章于 2024-05-25 14:34:39 发布

春疯得意

最新推荐文章于 2024-05-25 14:34:39 发布

阅读量260

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/zj1206358260/article/details/94477990

版权

本文介绍了如何使用CSS针对webkit内核浏览器定制滚动条的样式，通过特定的伪类实现滚动条外观的改变。

摘要由CSDN通过智能技术生成

CSS 自定义滚动条样式：针对 webkit 内核的游览器，使用下列伪类改变滚动条默认样式。

::webkit-scrollbar						//滚动条整体部分
::webkit-scrollbar-thumb			//滚动条内滑块（上下或左后移动）
::webkit-scrollbar-track			//滚动条轨道
::webkit-scrollbar-button			//滚动条轨道两端的按钮
::webkit-scrollbar-corner			//滚动条边角，即垂直滚动条与水平滚动条相交的地方

在这里插入图片描述
案例：

<html>
    <header>
        <meta charset="uft-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">       
        <title>css</title>
    </header>

    <style>
        #one{
			width:300px;
			height:600px;
			overflow:hidden;
			overflow-y:auto;
		}
		#one>div{
			width:100%;
			height:300px;
			background-color:yellow;
		}
		#one::-webkit-scrollbar{
			width: 4px;
		}
		#one::-webkit-

最低0.47元/天解锁文章

春疯得意

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS 自定义滚动条样式

CSS 自定义滚动条样式：针对 webkit 内核的游览器，使用下列伪类改变滚动条默认样式。::webkit-scrollbar //滚动条整体部分::webkit-scrollbar-thumb //滚动条内滑块（上下或左后移动）::webkit-scrollbar-track //滚动条轨道::webkit-scrollbar-button //滚动条轨道两端的按...
复制链接

扫一扫