div模擬滾動條效果範例程式碼_javascript技巧

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="html.aspx.cs" Inherits="WebApplication1.html" %>













var doc = 文件；
var _wheelData = -1;
var mainBox = doc.getElementById('mainBox');
函數綁定(obj, type, handler) {
var node = typeof obj == "string" ? $（物件）：物件；
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" ? $（物件)：物件；
bind(node, 'mousewheel', function (event) {
var data = -getWheelData(event);
handler(data);
if (document.all) {
視窗.event.returnValue = false;
} else {
event.preventDefault()
}

});
//狐狐
bind(>bind( node, 'DOMMouseScroll', function (event) {
var data = getWheelData(event);
handler(data);
event.preventDefault();
});
function getWheelData (event) {
var e = event ||視窗.事件;
返回e.wheelDelta ？ e.wheelDelta : e.detail * 40;
}
}

function addScroll() {
this.init.apply(this, 參數);
}
this.init.apply(this, 參數);
}
addScroll.prototype = {
init: function (mainBox, contentBox, className) {
var mainBox = doc.getElementById(mainBox);
var contentBox = doc.getElementById(contentBox); varscroll this._createScroll(mainBox, className);
this._resizeScorll(scrollDiv, mainBox, contentBox);
this._tragScroll(scrollDiv, mainBox, contentBox);
this._wheelChange(scroll)); ;
this._clickScroll(scrollDiv, mainBox, contentBox);
},
//建立捲軸
_createScroll: function (mainBox, className) {
var _scrollBox = doc.createElement( 'div');
_scrollBox.setAttribute("id", "scrollBox");
var _scroll = doc.createElement('div');
var span = doc.createElement('span') ;
_scrollBox.appendChild(_scroll);
_scroll.appendChild(span);
_scroll.className = 類別名稱;
mainBox.appendChild(_scrollBox);
回傳>},
//調整捲軸
_resizeScorll: function (element, mainBox, contentBox) {
var p = element.parentNode;
var conHeight = contentBox.offsetHeight
; = mainBox.clientWidth;
var _height = mainBox.clientHeight;
var _scrollWidth = element.offsetWidth;
var _left = _width - _scrollWidth;
var _left = _width - _scrollWidth;
style_scoop. 🎜>p.style.height = _height "px";
p.style.left = _left "px";
p.style.position = "絕對";
p.style.background = " #ccc";
contentBox.style.width = (mainBox.offsetWidth - _scrollWidth) "px";
var _scrollHeight = parseInt(_height * (_height / conHeight));
if (_prollHeight .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 = element.onmousedown = function (event) {
var _this = element.onmousedown = 條件; = element.offsetTop;
var e = 事件||視窗.事件;
var top = e.clientY;
//this.onmousemove=scrollGo;
document.onmousemove=scrollGo; document.onmouseup = 函數（事件）{
this.onmousemove = null;
}
函數scrollGo(event) {
var e = event ||視窗.事件;
var _top = e.clientY;
var _t = _top - 頂部_scrollTop;
if (_t > (mainHeight - element.offsetHeight)) {
_t = mainHeight - element.offsetHeight
}
}
; >if (_t _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) : 主框;
var flag = 0，rate = 0，wheelFlag = 0
var flag = 0，rate = 0，wheelFlag = 0 ;
if (node) {
mouseWheel(node, function (data) {
wheelFlag = data;
if (_wheelData >= 0) {
flag = _wheelData; wheelFlag = _wheelData * 12;
} else {
flag = wheelFlag / 12; (flag flag = 0
wheelFlag = 0
}
if (flag >= (mainBox.offsetHeight - element.offsetHeight)) {
flag = (mainBox.clientHeight - element.offsetHeight); wheelFlag = (Boxw. - 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 = 函數（事件）{
var e = 事件 ||視窗.事件;
var t = e.target || e.srcElement;
var sTop = document.documentElement.scrollTop > 0 ?文檔.documentElement.scrollTop : 文件.body.scrollTop;
var top = mainBox.offsetTop;
var _top = e.clientY sTop - top - element.offsetHeight / 2;
if (_top _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');
$(function () {
$("#scrollBox").hide();

$("#mainBox").mouseover(function () {


$("#scrollBox").show()


}).mouseout(function () {

$("#scrollBox").hide(); ;

});

腳本>
身體>