div模拟滚动条效果示例代码_javascript技巧

<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>






<script type="text/javascript"> <br>var doc = document; <br>var _wheelData = -1; <br>var mainBox = doc.getElementById('mainBox'); <br>function bind(obj, type, handler) { <br>var node = typeof obj == "string" ? $(obj) : obj; <br>if (node.addEventListener) { <br>node.addEventListener(type, handler, false); <br>} else if (node.attachEvent) { <br>node.attachEvent('on' + type, handler); <br>} else { <br>node['on' + type] = handler; <br>} <br>} <br>function mouseWheel(obj, handler) { <br>var node = typeof obj == "string" ? $(obj) : obj; <br>bind(node, 'mousewheel', function (event) { <br>var data = -getWheelData(event); <br>handler(data); <br>if (document.all) { <br>window.event.returnValue = false; <br>} else { <br>event.preventDefault(); <br>} <br><br>}); <br>//火狐 <br>bind(node, 'DOMMouseScroll', function (event) { <br>var data = getWheelData(event); <br>handler(data); <br>event.preventDefault(); <br>}); <br>function getWheelData(event) { <br>var e = event || window.event; <br>return e.wheelDelta ? e.wheelDelta : e.detail * 40; <br>} <br>} <br><br>function addScroll() { <br>this.init.apply(this, arguments); <br>} <br>addScroll.prototype = { <br>init: function (mainBox, contentBox, className) { <br>var mainBox = doc.getElementById(mainBox); <br>var contentBox = doc.getElementById(contentBox); <br>var scrollDiv = this._createScroll(mainBox, className); <br>this._resizeScorll(scrollDiv, mainBox, contentBox); <br>this._tragScroll(scrollDiv, mainBox, contentBox); <br>this._wheelChange(scrollDiv, mainBox, contentBox); <br>this._clickScroll(scrollDiv, mainBox, contentBox); <br>}, <br>//创建滚动条 <br>_createScroll: function (mainBox, className) { <br>var _scrollBox = doc.createElement('div'); <br>_scrollBox.setAttribute("id", "scrollBox"); <br>var _scroll = doc.createElement('div'); <br>var span = doc.createElement('span'); <br>_scrollBox.appendChild(_scroll); <br>_scroll.appendChild(span); <br>_scroll.className = className; <br>mainBox.appendChild(_scrollBox); <br>return _scroll; <br>}, <br>//调整滚动条 <br>_resizeScorll: function (element, mainBox, contentBox) { <br>var p = element.parentNode; <br>var conHeight = contentBox.offsetHeight; <br>var _width = mainBox.clientWidth; <br>var _height = mainBox.clientHeight; <br>var _scrollWidth = element.offsetWidth; <br>var _left = _width - _scrollWidth; <br>p.style.width = _scrollWidth + "px"; <br>p.style.height = _height + "px"; <br>p.style.left = _left + "px"; <br>p.style.position = "absolute"; <br>p.style.background = "#ccc"; <br>contentBox.style.width = (mainBox.offsetWidth - _scrollWidth) + "px"; <br>var _scrollHeight = parseInt(_height * (_height / conHeight)); <br>if (_scrollHeight >= mainBox.clientHeight) { <br>element.parentNode.style.display = "none"; <br>} <br>element.style.height = _scrollHeight + "px"; <br>}, <br>//拖动滚动条 <br>_tragScroll: function (element, mainBox, contentBox) { <br>var mainHeight = mainBox.clientHeight; <br>element.onmousedown = function (event) { <br>var _this = this; <br>var _scrollTop = element.offsetTop; <br>var e = event || window.event; <br>var top = e.clientY; <br>//this.onmousemove=scrollGo; <br>document.onmousemove = scrollGo; <br>document.onmouseup = function (event) { <br>this.onmousemove = null; <br>} <br>function scrollGo(event) { <br>var e = event || window.event; <br>var _top = e.clientY; <br>var _t = _top - top + _scrollTop; <br>if (_t > (mainHeight - element.offsetHeight)) { <br>_t = mainHeight - element.offsetHeight; <br>} <br>if (_t <= 0) { <br>_t = 0; <br>} <br>element.style.top = _t + "px"; <br>contentBox.style.top = -_t * (contentBox.offsetHeight / mainBox.offsetHeight) + "px"; <br>_wheelData = _t; <br>} <br>} <br>element.onmouseover = function () { <br>this.style.background = "#444"; <br>} <br>element.onmouseout = function () { <br>this.style.background = "#666"; <br>} <br>}, <br>//鼠标滚轮滚动，滚动条滚动 <br>_wheelChange: function (element, mainBox, contentBox) { <br>var node = typeof mainBox == "string" ? $(mainBox) : mainBox; <br>var flag = 0, rate = 0, wheelFlag = 0; <br>if (node) { <br>mouseWheel(node, function (data) { <br>wheelFlag += data; <br>if (_wheelData >= 0) { <br>flag = _wheelData; <br>element.style.top = flag + "px"; <br>wheelFlag = _wheelData * 12; <br>_wheelData = -1; <br>} else { <br>flag = wheelFlag / 12; <br>} <br>if (flag <= 0) { <br>flag = 0; <br>wheelFlag = 0; <br>} <br>if (flag >= (mainBox.offsetHeight - element.offsetHeight)) { <br>flag = (mainBox.clientHeight - element.offsetHeight); <br>wheelFlag = (mainBox.clientHeight - element.offsetHeight) * 12; <br><br>} <br>element.style.top = flag + "px"; <br>contentBox.style.top = -flag * (contentBox.offsetHeight / mainBox.offsetHeight) + "px"; <br>}); <br>} <br>}, <br>_clickScroll: function (element, mainBox, contentBox) { <br>var p = element.parentNode; <br>p.onclick = function (event) { <br>var e = event || window.event; <br>var t = e.target || e.srcElement; <br>var sTop = document.documentElement.scrollTop > 0 ? document.documentElement.scrollTop : document.body.scrollTop; <br>var top = mainBox.offsetTop; <br>var _top = e.clientY + sTop - top - element.offsetHeight / 2; <br>if (_top <= 0) { <br>_top = 0; <br>} <br>if (_top >= (mainBox.clientHeight - element.offsetHeight)) { <br>_top = mainBox.clientHeight - element.offsetHeight; <br>} <br>if (t != element) { <br>element.style.top = _top + "px"; <br>contentBox.style.top = -_top * (contentBox.offsetHeight / mainBox.offsetHeight) + "px"; <br>_wheelData = _top; <br>} <br>} <br>} <br>} <br>new addScroll('mainBox', 'content', 'scrollDiv'); <br>$(function () { <br>$("#scrollBox").hide(); <br><br>$("#mainBox").mouseover(function () { <br><br><br>$("#scrollBox").show(); <br><br><br>}).mouseout(function () { <br><br>$("#scrollBox").hide(); <br><br>}); <br><br>}); <br><br></script>