自定义滚动条

Kill_Living 2017-09-29 05:48:04

虽然做出了好多滚动条，但现在有个滚动条做不了，就是怎么让滑块宽度大于滚动条宽度，就像这样的滚动条

...全文

1014 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

Kill_Living 2017-09-30

打赏
举报

文本超出自己出现的那个，一开始用-webkit-scrollbar等属性改的，正常情况下重做滚动条更好，还是用前面-webkit-等属性改更好大神

Kill_Living 2017-09-30

打赏
举报

天际的海浪 2017-09-30

打赏
举报


<style type="text/css">
textarea::-webkit-scrollbar {
	width: 20px;
}
textarea::-webkit-scrollbar-track {
	background-color: #6ff;
	border-left: 8px solid #999;
	border-right: 8px solid #999;
}
textarea::-webkit-scrollbar-thumb {
	background-color: #666;
}
</style>
</head>
<body>
<textarea rows="10" cols="10">
	xx
	xx
	xx
	xx
	xx
	xx
	xx
	xx
	xx
	xx
	xx
	xx
	xx
	xx
	xx
	xx
	xx
	xx
	xx
	xx
	xx
	xx
	xx
	xx
	xx
</textarea>

天际的海浪 2017-09-30

打赏
举报

引用 4 楼 Kill_Living 的回复:

文本超出自己出现的那个，一开始用-webkit-scrollbar等属性改的，正常情况下重做滚动条更好，还是用前面-webkit-等属性改更好大神


textarea::-webkit-scrollbar {
	width: 20px;
}
textarea::-webkit-scrollbar-track {
	background-color: #6ff;
	border-left: 8px solid #999;
	border-right: 8px solid #999;
}
textarea::-webkit-scrollbar-thumb {
	background-color: #666;
}
textarea::-webkit-scrollbar {
	width: 20px;
}
textarea::-webkit-scrollbar-track {
	background-color: #6ff;
	border-left: 8px solid #999;
	border-right: 8px solid #999;
}
textarea::-webkit-scrollbar-thumb {
	background-color: #666;
}

天际的海浪 2017-09-29

打赏
举报

你原本 textera 的滚动条是用什么方式自定义的

Kill_Living 2017-09-29

打赏
举报

额大神我可能没说清楚我想改的 textera 的滚动条内容超出滚动条就出来，可不可以改成这样子，要是你这样子改恐怕要重新写好多JS

天际的海浪 2017-09-29

打赏
举报

滑块left为负数啊


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
.scroll {
	width: 10px;
	height: 300px;
	position: relative;
	background-color: #666;
	margin: 0px 10px;
}
.scroll div {
	width: 30px;
	height: 30px;
	position: absolute;
	left: -10px;
	top: 50px;
	background-color: #333;
}
</style>
</head>
<body>
<div class="scroll"><div></div></div>
</body>
</html>