javascript實(shí)現(xiàn)滾動(dòng)條效果
本文實(shí)例為大家分享了javascript實(shí)現(xiàn)滾動(dòng)條效果的具體代碼，供大家參考，具體內(nèi)容如下
<!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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. .NET Core Web APi類庫內(nèi)嵌運(yùn)行的方法2. 跟我學(xué)XSL（一）第1/5頁3. li中插入img圖片間有空隙的解決方案4. Python使用matplotlib繪制圓形代碼實(shí)例5. react中ref獲取dom或者組件的實(shí)現(xiàn)方法6. python爬取豆瓣電影排行榜(requests)的示例代碼7. ubuntu 徹底卸載 apache2，php5和mysql8. 詳解java中static關(guān)鍵詞的作用9. 原生js XMLhttprequest請(qǐng)求onreadystatechange執(zhí)行兩次的解決10. PHP中重啟php-fpm的幾種方法匯總
網(wǎng)公網(wǎng)安備