javascript jscrollはHTML要素のスクロールバーをシミュレートします_javascriptスキル

//スクロールバーイベントを追加します
regEvent: function(elem) {
var that = this,
sbody = elem.firstChild,
list = sbody.nextSibling,
//スクロールバー要素
s = list.firstChild,
//スクロールバーのスクロール最小値
min = 0,
//スクロールバーのスクロール最大値
max = list.offsetHeight - s.offsetHeight,
_default = parseInt(sbody['data-height'] || sbody.getAttribute('data-height'), 10),
unit = (sbody.scrollHeight - _default) / max ,
//Firefox ブラウザ
firefox = 'MozBinding' in document.documentElement.style,
//マウスホイール イベント
マウスホイール = 'DOMMouseScroll' : 'mousewheel',
// opera ブラウザ
opera = window.oprea && navigator.userAgent.indexOf('MSIE') === -1,
//マウスダウン イベントを発生させます
firing = false,
/ /マウス クリック、タイマー実行時間
interval,
//コンテナからのスクロール バーの高さ
top,
//スクロール バーの現在の上部値
cur,
//毎回 ピクセル数スクロール
speed = 18;

//変数キャッシュ min, max
this.limits[s] = {
min: 0,
max: max
}
//スクロールイベント マウスホイールをスライドさせてスクロールバーを移動します
squid.on(elem, Mousewheel, function(event) {
var delta;

if(event.wheelDelta) {
delta = opera ? -event.wheelDelta / 120 :event.wheelDelta / 120
}else{
delta = -event.detail / 3
}

cur = parseInt( s .style.top || 0, 10)
//上にスクロール
if(delta > 0) {
top = cur - 速度
if(top トップ = 最小
}
}else{//下にスクロール
トップ = 速度
if(トップ > 最大) {
トップ = 最大
}
}
s.style.top = top 'px'
that.doScroll(sbody, top *unit)

//body要素のスクロールバーがスクロールしないようにします
event.preventDefault()
})

//ie6、7、8、マウスが 2 回連続してクリックされ、時間間隔が短すぎる場合、2 番目のイベントはトリガーされません
// スクロールをドラッグしますバーをクリックしてスクロールします。 到達可能な領域
squid.on(list, 'mousedown', function(event) {
var target =event.target,
y =event.clientY;

target = event .target
if(target.tagName.toLowerCase() === 'shape')
target = s

//マウスでクリックされた要素はスクロールバーです
if(target === s) {
//invoke elem setCapture
s.setCapture && s.setCapture()

that.scrolling.diffy = y - s.offsetTop
//マウスの移動中にスクロールバーがドラッグされているかどうかを判定
that.scrolling.elem = s
}else if(target.className.match('jscroll-list')){
firing = true
interval = setInterval( function() {
if(firering) {
that.mouseHandle(list, y, Unit)
}
}, 80)
}
})

//マウスがスクロールバーを放してスクロールを停止します
squid.on(list, 'mouseup', function() {
//invoke elem releaseCapture
s.releaseCapture && s.releaseCapture()

firing = false
clearInterval(interval)
})

//スクロールバー要素はフォーカスを取得し、キーアップイベントをトリガーできます
squid.on(s, 'click', function () {
this.focus()
})

// スクロール バーがフォーカスを取得した後、スクロール バーの上下キーをトリガーします。
squid.on(s, 'keydown' , function(event) {
var keyCode =event.keyCode,
state = false;

cur = parseInt(s.style.top || 0, 10)
switch(keyCode ) {
ケース 38:
top = cur - 速度
if(top < min) {
top = min
}
state = true
break
ケース 40:
top = cur 速度
if(top > max) {
top = max
}
state = true
break
default:
break
}
if(state) {
s.style.top = top 'px'
that.doScroll (sbody, top *unit)
}

event.preventDefault()
})
}