原声滚动条样式不好看,这里可以自定义大小图形,背景颜色。代码粘贴即可运行。
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<head>
<style>
body {
background: #607D8B;
}
.content {
width: 800px;
height: 600px;
margin: 100px auto;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
overflow: hidden;
background: #fff;
position: relative;
}
.contentlist {
position: absolute;
top: 0;
width: 100%;
height: auto;
}
.listitem {
width: 100%;
height: 40px;
box-sizing: border-box;
border-top: 1px solid #888888;
line-height: 40px;
text-align: center;
}
.scrollbargroup {
position: absolute;
width: 12px;
height: 100%;
background: transparent;
right: 0;
top: 0;
}
.scrollbarbg {
width: 5px;
height: 100%;
background: rgba(0, 0, 0, .1);
position: absolute;
right: 0;
transition: all .1s ease-out;
border-radius: 5px;
}
.scrollbarslide {
width: 100%;
height: 60px;
background: rgb(110, 125, 216);
position: absolute;
top: 0;
border-radius: 5px;
}
</style>
</head>
<body>