webkit浏览器自定义滚动条样式代码

最新推荐文章于 2023-09-22 09:09:37 发布

joyhen

最新推荐文章于 2023-09-22 09:09:37 发布

阅读量6.2k

点赞数

分类专栏： HTML 文章标签： jquery.mCustomScroll 样式浏览器 WebKit

HTML 专栏收录该内容

40 篇文章

订阅专栏

欢迎加QQ群14670545 探讨

原文地址：http://www.yiyifly.com/blog/archives/572

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页标题</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">


html {
    overflow: auto;
}
body {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow-y: scroll;
    overflow-x: hidden;
}

/*滚动条宽度*/
::-webkit-scrollbar {
    width: 8px;
}
 
/* 轨道样式 */
::-webkit-scrollbar-track {

}
 
/* Handle样式 */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0,0,0,0.2); 
}

/*当前窗口未激活的情况下*/
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(0,0,0,0.1); 
}

/*hover到滚动条上*/
::-webkit-scrollbar-thumb:vertical:hover{
	background-color: rgba(0,0,0,0.3);
}
/*滚动条按下*/
::-webkit-scrollbar-thumb:vertical:active{
	background-color: rgba(0,0,0,0.7);
}

textarea{width: 500px;height: 300px;border: none;padding: 5px;}
</style>
</head>

<body>
<textarea name="" rows="" cols="">

html {
    overflow: auto;
}
body {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow-y: scroll;
    overflow-x: hidden;
}

/*滚动条宽度*/
::-webkit-scrollbar {
    width: 8px;
}
 
/* 轨道样式 */
::-webkit-scrollbar-track {

}
 
/* Handle样式 */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0,0,0,0.2); 
}

/*当前窗口未激活的情况下*/
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(0,0,0,0.1); 
}

/*hover到滚动条上*/
::-webkit-scrollbar-thumb:vertical:hover{
	background-color: rgba(0,0,0,0.3);
}
/*滚动条按下*/
::-webkit-scrollbar-thumb:vertical:active{
	background-color: rgba(0,0,0,0.7);
}
</textarea>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
	<p>fsdf</p>
</body>
</html>

效果