<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> html, body { height: 100%; margin: 0; } #container { position: absolute; top: 50px; left: 100px; height: 400px; width: 150px; background-color: aliceblue; padding: 2rem; box-sizing: border-box; /*必须属性，否则给scrollTop赋值无效*/ overflow-y: hidden; position: relative; padding-right: 30px; } .scrollbar { height: 50px; width: 10px; border-radius: 20px; background: #ccc; position: absolute; right: 0; } </style> <script> window.onload = function () { var scrollbar = document.querySelector('.scrollbar'); var container = scrollbar.parentNode; container.scrollbar = scrollbar; container.ratio = (container.scrollHeight - container.offsetHeight) / (container.offsetHeight - scrollbar.offsetHeight); container.addEventListener('mousewheel', function(e) { this.scrollTop += e.deltaY; this.scrollbar.style.top = (this.scrollTop + this.scrollTop / this.ratio) + 'px'; }); container.addEventListener('mousedown', function (e) { if (e.target === this.scrollbar) { this.prevY = e.pageY; } }); container.addEventListener('mouseup', function (e) { this.prevY = null; }); container.addEventListener('mousemove', function (e) { if (this.prevY) { this.scrollTop += (e.pageY - this.prevY) * this.ratio; this.scrollbar.style.top = (this.scrollTop + this.scrollTop / this.ratio) + 'px'; this.prevY = e.pageY; } e.preventDefault(); }); } </script> </head> <body> <div> <div></div> <p>fefe</p> <p>fefe</p> <p>fefe</p> <p>fefe</p> <p>fefe</p> <p>fefe</p> <p>fefe</p> <p>fefe</p> <p>fefe</p> <p>fefe</p> <p>fefe</p> <p>fefe</p> <p>fefe</p> <p>fefe</p> <p>fefe</p> <p>fefe</p> <p>fefe</p> <p>fefe</p> <p>fefe</p> <p>fefe</p> <p>fefe</p> </div> </body> </html>
javascript实现滚动条效果
内容版权声明：除非注明，否则皆为本站原创文章。
转载注明出处：http://www.heiqu.com/ce4a976378d39a2bc287193d9e10427c.html