javascript模擬實現滾動條效果程式碼例項
很多時候,自帶的滾動條並不能夠滿足我們的需求。
多半是由於醜陋的外觀導致的,下面就分享一段程式碼例項,它模擬實現了垂直滾動條效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin: 0; padding: 0; } body { background: #E5F0FF; } .wrap { width: 520px; height: 500px; margin: 50px auto; overflow: hidden; border: 1px solid #999; border-radius: 5px; background: #fff; position: relative; -moz-user-select: none; } .content { float: left; width: 480px; padding: 10px; position: absolute; top: 0; } .scrollbar { float: right; width: 20px; background: #ececec; height: 500px; position: relative; } .bar { width: 20px; height: 50px; border: 1px solid #bbb; background: #ccc; border-radius: 5px; cursor: default; position: absolute; left: 0; top: 0; } </style> </head> <body> <div class="wrap"> <div class="content"></div> <div class="scrollbar"> <div class="bar"></div> </div> </div> <script> (function () { var wrap = document.querySelector('.wrap'); var content = document.querySelector('.content'); var scrollbar = document.querySelector('.scrollbar') var bar = document.querySelector('.bar'); var scrollbarPos = pos(scrollbar); var wrapPos = pos(wrap); var flag = false; function pos(ele) { return ele.getBoundingClientRect(); } bar.onmousedown = function (e) { var e = e || window.event; var barPos = pos(bar); var mouseY = e.clientY - barPos.top; flag = true; document.onmousemove = function (e) { if (flag) { var e = e || window.event; var contentPos = pos(content); var Y = e.clientY - mouseY - scrollbarPos.top; if (Y < 0) { Y = 0; } else if (Y > scrollbarPos.height - barPos.height) { Y = scrollbarPos.height - barPos.height; } var cY = -Y * (contentPos.height - wrapPos.height) / (scrollbarPos.height - barPos.height); bar.style.top = Y + 'px'; content.style.top = cY + 'px'; } return false; } document.onmouseup = function () { flag = false; document.onmousemove = null; } } wrap.onselectstart = function () { return false; } if (wrap.onmousewheel === null) { wrap.onmousewheel = function (e) { var e = e || window.event; var delta = event.wheelDelta; fn(delta); } } else { wrap.addEventListener('DOMMouseScroll', function (e) { var delta = e.detail > 0 ? -120 : 120; e.preventDefault(); fn(delta); }, false) } function fn(delta) { var contentY = pos(content).top - wrapPos.top; var cY = contentY + delta; if (cY >= 0) { cY = 0; } else if (cY <= -pos(content).height + wrapPos.height) { cY = -pos(content).height + wrapPos.height; } var bY = -cY * (scrollbarPos.height - pos(bar).height) / (pos(content).height - wrapPos.height) bar.style.top = bY + 'px'; content.style.top = cY + 'px'; } })() </script> </body> </html>
相關文章
- javascript模擬實現ArrayList效果程式碼例項JavaScript
- 美化滾動條效果程式碼例項
- js實現的模擬滾動條效果JS
- 拖動滾動條實現div跟隨效果程式碼例項
- javascript模擬實現連結的title效果例項程式碼JavaScript
- javascript模擬實現toAarray()方法程式碼例項JavaScript
- js模擬實現多型效果程式碼例項JS多型
- css模擬實現雙擊效果程式碼例項CSS
- 模擬實現連結title效果程式碼例項
- 模擬實現文字框游標效果程式碼例項
- javascript實現animate()動畫效果程式碼例項JavaScript動畫
- canvas模擬彈幕效果程式碼例項Canvas
- 模擬發放紅包效果程式碼例項
- css隱藏滾動條程式碼例項CSS
- 模擬實現Object.is()方法程式碼例項Object
- javascript動態實現的表單提交效果程式碼例項JavaScript
- javascript模擬實現trim()方法例項程式碼JavaScript
- javascript文字水平滾動程式碼例項JavaScript
- 拖動滾動條實現網頁內容自動載入程式碼例項網頁
- js獲取滾動條高度例項程式碼JS
- js模擬實現hashCode()方法程式碼例項JS
- js模擬實現replaceAll()函式程式碼例項JS函式
- css模擬實現雙擊事件程式碼例項CSS事件
- javascript實現的淡入淡出效果程式碼例項JavaScript
- javascript實現的燃放煙火效果程式碼例項JavaScript
- javascript實現的動畫效果簡單例項程式碼JavaScript動畫單例
- js模擬實現alert()函式彈出警告視窗效果程式碼例項JS函式
- js實現的文字垂直滾動例項程式碼JS
- jQuery列表上下垂直滾動效果程式碼例項jQuery
- 網頁title標題滾動效果程式碼例項網頁
- CSS3實現的立方體3D滾動效果程式碼例項CSSS33D
- 表格拖動滾動條標題固定程式碼例項
- 拖動滾動條載入資料程式碼例項
- javascript實現的簡單驗證碼效果程式碼例項JavaScript
- jQuery模擬實現滑鼠點選事件程式碼例項jQuery事件
- 模擬實現select下拉選單例項程式碼單例
- javascript實現的數字分頁效果程式碼例項JavaScript
- 實現四捨五入效果的javascript程式碼例項JavaScript