业务场景:由于通过css无法改动ios设备的滚动条样式,所以这里采取用js手动写一个纵向滚动条
功能:实现滚动的时候出现滚动条,停止滚动,滚动条消失,示例代码如下:
<!DOCTYPE html>
<html>
<head>
<title>自定义滚动条</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
display: none;
}
.container {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
margin-top: 100px;
border: 1px solid red;
}
.content {
position: absolute;
width: calc(100% - 10px);
height: calc(100% - 10px);
margin: 5px;
overflow: auto;
}
.scrollbar {
position: absolute;
right: 0;
top: 0;
width: 10px;
height: 100%;
background-color: #eee;
opacity: 0;
}
.show {
opacity: 1;
}
.none {
opacity: 0;
animation: fadenum 1s 1;
}
@keyframes fadenum {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.thumb {
position: absolute;
right: 0;
top: 0;
width: 10px;
background-color: #999;
cursor: pointer;
}
</style>
<body>
<div class="container">
<div class="content">
<div>床前明月光</div>
<div>床前明月光</div>
<div>床前明月光</div>
<div>床前明月光</div>
<div>床前明月光</div>
<div>床前明月光</div>
<div>床前明月光</div>
<div>床前明月光</div>
<div>床前明月光</div>
<div>床前明月光</div>
<div>床前明月光</div>
<div>床前明月光</div>
<div>床前明月光</div>
<div>床前明月光</div>
<div>床前明月光</div>
<div>床前明月光</div>
<div>床前明月光</div>
<div>床前明月光</div>
<div>床前明月光</div>
<div>床前明月光</div>
<div>床前明月光</div>
<div>床前明月光</div>
</div>
<div class="scrollbar">
<div class="thumb"></div>
</div>
</div>
<script>
var container = document.querySelector(".container");
var content = document.querySelector(".content");
var scrollbar = document.querySelector(".scrollbar");
var thumb = document.querySelector(".thumb");
thumb.style.height = (container.clientHeight / content.scrollHeight) * container.clientHeight + "px";
content.addEventListener("scroll", function () {
scrollbar.classList.add('show')
scrollbar.classList.remove('none')
var scrollPercent = content.scrollTop / (content.scrollHeight - content.clientHeight);
var thumbPosition = (container.clientHeight - thumb.offsetHeight) * scrollPercent;
thumb.style.top = thumbPosition + "px";
});
container.addEventListener("touchend", function (e) {
setTimeout(() => {
scrollbar.classList.add('none')
scrollbar.classList.remove('show')
}, 1500);
})
thumb.addEventListener("mousedown", function (e) {
e.preventDefault();
scrollbar.style.display = 'block'
var startY = e.clientY;
var startTop = thumb.offsetTop;
document.addEventListener("mousemove", mousemove);
document.addEventListener("mouseup", mouseup);
function mousemove(e) {
var delta = e.clientY - startY;
var thumbPosition = startTop + delta;
if (thumbPosition < 0) {
thumbPosition = 0;
}
if (thumbPosition > container.clientHeight - thumb.offsetHeight) {
thumbPosition = container.clientHeight - thumb.offsetHeight;
}
var scrollPercent = thumbPosition / (container.clientHeight - thumb.offsetHeight);
content.scrollTop = scrollPercent * (content.scrollHeight - content.clientHeight);
thumb.style.top = thumbPosition + "px";
}
function mouseup(e) {
document.removeEventListener("mousemove", mousemove);
document.removeEventListener("mouseup", mouseup);
}
});
</script>
</body>
</html>