用js手动写一个纵向滚动条

业务场景：由于通过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>