<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport"> <style> body{ margin: 0; padding: 0; } #scroll{ width: 5px; background: red; position: fixed; top:0; bottom:0; } #scroll_thumb{ width: 100%; background: black; } #scroll_content{ height: 2000px; } </style> </head> <body> <div id="scroll"> <div id="scroll_thumb"></div> </div> <div id="scroll_content"> </div> <script> var scroll_thumb = document.getElementById('scroll_thumb'); / / calculate the height of the web page visual area and custom scroll bar than var heightProportion = window. The innerHeight/document body. ScrollHeight; / / calculate the orbit of custom scroll bar high var scroll_track_height = (document. Body. ScrollHeight - window. InnerHeight) * heightProportion; Var scroll_thumb_height = window.innerheight - scroll_track_height; scroll_thumb.style = "height:"+scroll_thumb_height+"px"; Window. Onscroll = function () {/ / according to the height of the page up custom scroll bar top distance computed var customScrollTop = document. The documentElement. The scrollTop * heightProportion; Scroll_thumb. style = "height:"+scroll_thumb_height+"px; +'margin-top:'+ customScrollTop +'px'; } </script> </body> </html>Copy the code