javascript實現滾動條效果
本文實例為大家分享了javascript實現滾動條效果的具體代碼，供大家參考，具體內容如下
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' 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 id='container'> <div class='scrollbar'></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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. 基于android studio的layout的xml文件的創建方式2. 解決Android studio xml界面無法預覽問題3. 詳解Android studio 動態fragment的用法4. 圖文詳解vue中proto文件的函數調用5. 什么是python的自省6. Spring Boot和Thymeleaf整合結合JPA實現分頁效果(實例代碼)7. Android如何加載Base64編碼格式圖片8. 使用Android studio查看Kotlin的字節碼教程9. Vuex localStorage的具體使用10. Vue封裝一個TodoList的案例與瀏覽器本地緩存的應用實現
網公網安備