How to customize the scroll bar by js

This article is about how js customizes the scroll bar. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Achieve:

* {margin: 0 position padding: 0;} html,body {width: 100% skyblue; text-align height: 100%;} # box {width: 100% position height: 100%; overflow: hidden;} / * Page blocks crossed one by one * / .ball {width: 100% skyblue; text-align height: 500px; font-size:100px; font-weight:bold; color: skyblue; text-align: height } / * / / Scroll bar * / # scroll {width: 20px; height: 96%; position: fixed; top: 2%; right: 5px; border-radius: 10px; background-color: rgba (235,233,233,0.5); z-index: 9998; opacity: 0;} / / the small bar on the scroll bar * / # scrollBar {position: absolute; z-index: 1 / * / / set above * / width: 20px; height: 40px; border-radius: 10px; left: 0; top: 0; background-color: red;opacity: 0.6;} 1

two

three

four

five

six

Var content = document.getElementById ("content"); var box = document.getElementById ("box"); var scroll = document.getElementById ("scroll"); var scrollBar = document.getElementById ("scrollBar"); var Step = {value: 0, size: 20, maxVal: Math.ceil ((content.offsetHeight-document.body.offsetHeight) / 20), getCurrentVal:function () {return this.value;}, next:function () {if (this.value==this.maxVal) return This.value++;}, pre:function () {if (this.value==0) return; this.value--;}, getDistance:function () {return this.getCurrentVal () * this.size;}, update:function () {this.maxVal = Math.ceil ((content.offsetHeight-document.body.offsetHeight) / this.size);}} window.addEventListener ("resize", function () {Step.update () }); box.addEventListener ("DOMMouseScroll", scrollfunc); box.addEventListener ("mousewheel", scrollfunc); function scrollfunc (e) {if (e.typewriter = "mousewheel") {/ / non-FF e.wheelDelta0?Step.next (): Step.pre ();} document.title = Step.getCurrentVal (); box.scrollTop = Math.min (Step.getDistance (), content.offsetHeight-document.body.offsetHeight) / / calculate scroll ratio var percent = box.scrollTop/ (content.offsetHeight-document.body.offsetHeight); / / display scroll bar scroll.style.opacity = 100; / / calculate scroll bar position scrollBar.style.top = (scroll.offsetHeight-scrollBar.offsetHeight) * percent + "px";} Thank you for reading! This is the end of the article on "how to customize the scroll bar in js". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!