自定义滚动条
来源：互联网 发布：哇掌柜是什么软件 编辑：程序博客网 时间：2024/06/13 23:04
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div模拟的自定义滚动条</title> <style type="text/css"> * { margin: 0; padding: 0; } p { height: 1000px; } #mainBox { width: 400px; height: 500px; border: 1px #bbb solid; position: relative; overflow: hidden; margin: 50px auto; } #content { height: 2500px; position: absolute; left: 0; top: 0; background:url(img/scrollTest.jpg); } .scrollDiv { width: 18px; position: absolute; top: 0; background: #666; border-radius: 10px; } </style> </head> <body> <div id="mainBox"> <div id="content"></div> </div> <p></p> <script type="text/javascript"> var doc = document; var _wheelData = -1; var mainBox = doc.getElementById('mainBox'); function bind(obj, type, handler) { var node = typeof obj == "string" ? $(obj) : obj; if (node.addEventListener) { node.addEventListener(type, handler, false); } else if (node.attachEvent) { node.attachEvent('on' + type, handler); } else { node['on' + type] = handler; } } function mouseWheel(obj, handler) { var node = typeof obj == "string" ? $(obj) : obj; bind(node, 'mousewheel', function(event) { var data = -getWheelData(event); handler(data); if (document.all) { window.event.returnValue = false; } else { event.preventDefault(); } }); //火狐 bind(node, 'DOMMouseScroll', function(event) { var data = getWheelData(event); handler(data); event.preventDefault(); }); function getWheelData(event) { var e = event || window.event; return e.wheelDelta ? e.wheelDelta : e.detail * 40; } } function addScroll() { this.init.apply(this, arguments); } addScroll.prototype = { init : function(mainBox, contentBox, className) { var mainBox = doc.getElementById(mainBox); var contentBox = doc.getElementById(contentBox); var scrollDiv = this._createScroll(mainBox, className); this._resizeScorll(scrollDiv, mainBox, contentBox); this._tragScroll(scrollDiv, mainBox, contentBox); this._wheelChange(scrollDiv, mainBox, contentBox); this._clickScroll(scrollDiv, mainBox, contentBox); }, //创建滚动条 _createScroll : function(mainBox, className) { var _scrollBox = doc.createElement('div') var _scroll = doc.createElement('div'); var span = doc.createElement('span'); _scrollBox.appendChild(_scroll); _scroll.appendChild(span); _scroll.className = className; mainBox.appendChild(_scrollBox); return _scroll; }, //调整滚动条 _resizeScorll : function(element, mainBox, contentBox) { var p = element.parentNode; var conHeight = contentBox.offsetHeight; var _width = mainBox.clientWidth; var _height = mainBox.clientHeight; var _scrollWidth = element.offsetWidth; var _left = _width - _scrollWidth; p.style.width = _scrollWidth + "px"; p.style.height = _height + "px"; p.style.left = _left + "px"; p.style.position = "absolute"; p.style.background = "#ccc"; contentBox.style.width = (mainBox.offsetWidth - _scrollWidth) + "px"; var _scrollHeight = parseInt(_height * (_height / conHeight)); if (_scrollHeight >= mainBox.clientHeight) { element.parentNode.style.display = "none"; } element.style.height = _scrollHeight + "px"; }, //拖动滚动条 _tragScroll : function(element, mainBox, contentBox) { var mainHeight = mainBox.clientHeight; element.onmousedown = function(event) { var _this = this; var _scrollTop = element.offsetTop; var e = event || window.event; var top = e.clientY; //this.onmousemove=scrollGo; document.onmousemove = scrollGo; document.onmouseup = function(event) { this.onmousemove = null; } function scrollGo(event) { var e = event || window.event; var _top = e.clientY; var _t = _top - top + _scrollTop; if (_t > (mainHeight - element.offsetHeight)) { _t = mainHeight - element.offsetHeight; } if (_t <= 0) { _t = 0; } element.style.top = _t + "px"; contentBox.style.top = -_t * (contentBox.offsetHeight / mainBox.offsetHeight) + "px"; _wheelData = _t; } } element.onmouseover = function() { this.style.background = "#444"; } element.onmouseout = function() { this.style.background = "#666"; } }, //鼠标滚轮滚动，滚动条滚动 _wheelChange : function(element, mainBox, contentBox) { var node = typeof mainBox == "string" ? $(mainBox) : mainBox; var flag = 0, rate = 0, wheelFlag = 0; if (node) { mouseWheel( node, function(data) { wheelFlag += data; if (_wheelData >= 0) { flag = _wheelData; element.style.top = flag + "px"; wheelFlag = _wheelData * 12; _wheelData = -1; } else { flag = wheelFlag / 12; } if (flag <= 0) { flag = 0; wheelFlag = 0; } if (flag >= (mainBox.offsetHeight - element.offsetHeight)) { flag = (mainBox.clientHeight - element.offsetHeight); wheelFlag = (mainBox.clientHeight - element.offsetHeight) * 12; } element.style.top = flag + "px"; contentBox.style.top = -flag * (contentBox.offsetHeight / mainBox.offsetHeight) + "px"; }); } }, _clickScroll : function(element, mainBox, contentBox) { var p = element.parentNode; p.onclick = function(event) { var e = event || window.event; var t = e.target || e.srcElement; var sTop = document.documentElement.scrollTop > 0 ? document.documentElement.scrollTop : document.body.scrollTop; var top = mainBox.offsetTop; var _top = e.clientY + sTop - top - element.offsetHeight / 2; if (_top <= 0) { _top = 0; } if (_top >= (mainBox.clientHeight - element.offsetHeight)) { _top = mainBox.clientHeight - element.offsetHeight; } if (t != element) { element.style.top = _top + "px"; contentBox.style.top = -_top * (contentBox.offsetHeight / mainBox.offsetHeight) + "px"; _wheelData = _top; } } } } new addScroll('mainBox', 'content', 'scrollDiv'); </script> </body> </html> http://www.wufangbo.com/mcustomscrollbar/
阅读全文
0 0
- 自定义BODY滚动条
- 自定义滚动条
- 自定义datagridview滚动条
- 自定义滚动条
- JPanel自定义滚动条
- 自定义网页滚动条
- 自定义滚动条
- 自定义滚动条插件
- 自定义滚动条
- 自定义滚动条
- css3 自定义滚动条
- 滚动条的自定义
- 拖拽+自定义滚动条
- 自定义滚动条样式
- 自定义滚动条
- 自定义View 滚动条
- 自定义滚动条
- 自定义滚动条样式
- java合成图片并添加文字
- TreeSet集合内部排序
- linux下使用openssl和md5sum加密文件或者字符串
- 超赞的word转pdf在线攻略，谁用谁知道
- AOP面向切面编程
- 自定义滚动条
- FreeRTOS 临界区总结
- myeclipse2014中新建struts运行出错的问题
- c++顺序容器
- Java程序猿必读书籍
- 欢迎使用CSDN-markdown编辑器
- jquery获取tr中第一个td的值
- Swift
- TEST
