Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.