javascript jscroll模擬html元素滾動條

更新時間：2012年12月18日 16:31:25 作者：

這里是自己在工作不太忙的時候?qū)懗鰜砹艘粋€用戶可以自定義的滾動條jscroll，以下簡稱jscroll。jscroll默認只提供一種滾動條樣式，部分樣式來自google webstore ，其中有部分css3樣式主要用于實現(xiàn)圓角，陰影效果

主流瀏覽器默認為html元素提供的滾動條不美觀，而且前端開發(fā)人員想對其通過css進行統(tǒng)一樣式的美化也是不可實現(xiàn)的。比如ie可以通過樣式來實現(xiàn)簡單的美化、Webkit內(nèi)核瀏覽器可以控制滾動條的顯示效果，firefox則不允許用戶為滾動條定義樣式。但是對于追求友好的用戶體驗的前端開發(fā)人員，是不會被這些瀏覽器的不一致行為所阻止的。我們可以自己通過標(biāo)準(zhǔn)的html元素模擬來實現(xiàn)自定義的滾動條。

這里是自己在工作不太忙的時候?qū)懗鰜砹艘粋€用戶可以自定義的滾動條jscroll，以下簡稱jscroll。jscroll默認只提供一種滾動條樣式，部分樣式來自google webstore ，其中有部分css3樣式主要用于實現(xiàn)圓角，陰影效果。為實現(xiàn)跨瀏覽器情況下滾動條顯示效果的一致，對于ie6, 7, 8不支持css3的瀏覽器引入了 PIE.htc 文件。下面就實現(xiàn)的功能以及兼容性、使用方法、具體代碼實現(xiàn)分別做一下講解。

實現(xiàn)功能以及兼容性

jscroll實現(xiàn)了系統(tǒng)默認滾動條的幾乎所有功能，比如：拖動滾動條查看內(nèi)容、滾動鼠標(biāo)滾輪查看內(nèi)容、點擊滾動條可到達區(qū)域的上方或者下方來觸發(fā)滾動條的滾動、鍵盤上下鍵來觸發(fā)滾動條的滾動。firefox、chrome,、ie9+ 等最新瀏覽器支持css3以及js的最新API，所以沒有任何兼容性問題。ie6, 7, 8 不支持css3通過引入PIE.htc 的hack文件來做兼容處理。js方面對于不支持的API通過舊的API來做了兼容。有最大兼容性問題的瀏覽器是ie6，不支持點擊滾動條可到達區(qū)域來觸發(fā)滾動條滾動，也不支持鍵盤上下鍵來觸發(fā)滾動條的滾動。導(dǎo)致這個問題的原因主要是因為引入了支持css3的PIE.htc文件，如果不引入該hack文件，所有操作都能支持，沒法辦為了顯示效果的一致，只好選擇了不支持部分功能。

使用方法

使用自定義滾動條最多的情況應(yīng)該是頁面彈出層，或者是頁面上某一個區(qū)域，千萬不要對整個頁面的滾動條進行自定義操作。對于需要使用jscroll的元素，需要添加自定義屬性data-scroll="true"來告訴程序需要使用jscroll來替換系統(tǒng)默認的滾動條，同時還需要通過添加自定義屬性data-width=""、data-height=""來指定元素要顯示的寬度和高度。jscroll會根據(jù)用戶定義的寬度和高度計算內(nèi)容的顯示寬度以及滾動條顯示的高度并添加交互的事件。

具體代碼實現(xiàn)

jscroll的實現(xiàn)邏輯并不復(fù)雜，實現(xiàn)具體功能的js代碼不到400行，但是這里依賴了一些基礎(chǔ)的方法，所以需要引入squid.js作為基礎(chǔ)方法的支持。對滾動條樣式的控制的css在一個單獨的jscroll-1.0.css文件里面，用戶可以自己修改擴展以滿足自己的需求。下面是對實現(xiàn)具體功能的每個方法做一個簡單的分析：

復(fù)制代碼代碼如下:

init: function(selector, context) { 
selecotr = selector || 'data-scroll' 
context = context || document 

var elems = squid.getElementsByAttribute(selector, context) 
this.initView(elems) 
}

init()是初始化函數(shù)，根據(jù)指定selector和context獲取需要使用自定義滾動條的元素，selector默認是data-scroll，上下文默認是當(dāng)前document。這里無論元素自定義屬性data-scroll="true"或者data-scroll="false"都會使用自定滾動條覆蓋系統(tǒng)默認滾動條，squid的getElementsByAttribute()方法只是提供通過元素是否有指定屬性來查找元素而忽略屬性值，這個方法沒有jquery選擇器或者高級瀏覽器提供的querySelectorAll()方法強大，因為這里squid只是做最基本的支持。找到需要自定義滾動條的元素之后調(diào)用initView方法來初始化滾動條整體結(jié)構(gòu)和顯示。

復(fù)制代碼代碼如下:

initView: function(elems) { 
var i = 0, 
length = elems.length, 
elem; 

for(; i < length; i++) { 
elem = elems[i] 
if(this.hasScroll(elem)) { 
this.create(elem) 
} 
} 

this.initEvent() 
}

initView()方法會首先對頁面上獲取的帶有自定義屬性data-scroll的元素遍歷，判斷每一個元素是否會出現(xiàn)滾動條，通過hasScroll()方法判斷。如果元素會出現(xiàn)滾動條則調(diào)用create()方法分別創(chuàng)建自定義的滾動條。initView()方法結(jié)束會調(diào)用initEvent()方法。

復(fù)制代碼代碼如下:

//是否有滾動條 
hasScroll: function(elem) { 
return elem.offsetHeight < elem.scrollHeight 
}

hasScroll()方法用于判斷元素是否會出現(xiàn)滾動條，返回true或者false。這里忽略元素的margin和padding，通過jscroll創(chuàng)建的滾動條默認margin和padding都是0。

復(fù)制代碼代碼如下:

//創(chuàng)建滾動條元素整體結(jié)構(gòu) 
create: function(elem) { 
var wrapper, 
list, 
//滾動條元素 
s, 
//帶滾動條元素顯示的高度 
height = elem['data-height'] || elem.getAttribute('data-height'), 
//帶滾動條元素顯示的寬度 
width = elem['data-width'] || elem.getAttribute('data-width'), 
//滾動條顯示高度 
value; 

//wrapper 
wrapper = document.createElement('div') 
wrapper.className = 'jscroll-wrapper' 
//forbid select text, for ie9 
/* 
* wrapper.onselectstart = function() { 
* return false 
* } 
*/ 
squid.css(wrapper, { 
height: height + 'px', 
width: width + 'px' 
}) 

squid.addClass(elem, 'jscroll-body') 
//overwrite the user define style 
squid.css(elem, { 
overflow: 'visible', 
position: 'absolute', 
height: 'auto', 
width: (width - 40) + 'px', 
padding: '0 20px 0 23px' 
}) 

//list 
list = document.createElement('div') 
list.className = 'jscroll-list unselectable'<BR> list.unselectable = 'on' 
squid.css(list, { 
height: (height - 5) + 'px' 
}) 

//滾動條 
s = document.createElement('div') 
s.className = 'jscroll-drag unselectable' 
s.unselectable = 'on' 
s.setAttribute('tabindex', '1') 
s.setAttribute('hidefocus', true) 

list.appendChild(s) 
wrapper.appendChild(list) 
//把需要出現(xiàn)滾動條的元素包裹起來 
elem.parentNode.replaceChild(wrapper, elem) 
wrapper.insertBefore(elem, list) 

//滾動條高度 
value = this.scrollbarHeight(elem, height) 
squid.css(s, { 
height: value + 'px' 
}) 

//add event 
this.regEvent(wrapper) 
}

create()方法用戶調(diào)整創(chuàng)建帶有自定義滾動條的元素整體結(jié)構(gòu)，首先通過創(chuàng)建了wrapper元素，用于包裝會出現(xiàn)滾動條的元素elem和滾動條可滾動的區(qū)域元素list以及滾動條元素s。通過從出現(xiàn)滾動條元素設(shè)置的自定義屬性data-width、data-height分別設(shè)置wrapper元素的寬度和高度。通過scrollbarHeight()方法計算得到了滾動條元素顯示的高度，整體結(jié)構(gòu)不算復(fù)雜。創(chuàng)建自定義滾動條整體結(jié)構(gòu)之后是為滾動條元素s和滾動條可到達區(qū)域元素list添加事件處理，通過regEvent()方法實現(xiàn)。

復(fù)制代碼代碼如下:

//計算滾動條的高度 
scrollbarHeight: function(elem, height) { 
var value = elem.scrollHeight; 

return (height / value) * height 
}

scrollbarHeight()方法通過簡單的數(shù)學(xué)計算返回滾動條元素應(yīng)該顯示的高度。

復(fù)制代碼代碼如下:

initEvent: function() { 
var that = this, 
_default, 
elem, 
top, 
min, 
max, 
prev, 
parent, 
sbody, 
unit; 

//滾動條滾動 
squid.on(document, 'mousemove', function(event) { 
elem = that.scrolling.elem 
if(elem !== null) { 
squid.addClass(elem, 'scrolling') 
top = event.clientY - that.scrolling.diffy 
parent = that.ie6 ? elem.parentNode.parentNode : elem.parentNode 
min = that.limits[elem].min 
max = that.limits[elem].max 
prev = parent.previousSibling 
sbody = prev.tagName.toLowerCase() === 'div' ? prev : prev.previousSibling 
_default = parseInt(sbody['data-height'] || sbody.getAttribute('data-height'), 10) 
unit = (sbody.scrollHeight - _default) / max 

squid.addClass(sbody.parentNode, 'unselectable') 
if(top < min) { 
top = min 
}else if(top > max) { 
top = max 
} 
elem.style.top = top + 'px' 
that.doScroll(sbody, top * unit) 
} 
}) 

//滾動結(jié)束 
squid.on(document, 'mouseup', function(event) { 
elem = that.scrolling.elem 
if(elem) { 
prev = that.ie6 ? elem.parentNode.parentNode.previousSibling : elem.parentNode.previousSibling 
sbody = prev.tagName.toLowerCase() === 'div' ? prev : prev.previousSibling 
squid.removeClass(sbody.parentNode, 'unselectable') 
} 

that.scrolling.elem = null 
that.scrolling.diffy = 0 
}) 
}

initEvent()方法實現(xiàn)了為document元素添加mousemove和mouseup事件，mousemove實現(xiàn)了在拖動滾動條元素滾動時查看的內(nèi)容跟隨變化。代碼首先判斷當(dāng)前是否有拖動滾動條查看內(nèi)容的操作，如果有就計算滾動條被拖動到的位置，然后計算查看內(nèi)容應(yīng)該到的地方。代碼里對ie6的判斷，是因為引入的PIE.htc文件破壞了原有的結(jié)構(gòu)（為了實現(xiàn)跨瀏覽器下顯示效果的一致，付出太大了?。。。ouseup事件處理程序?qū)崿F(xiàn)了清除上次操作的滾動條元素。

復(fù)制代碼代碼如下:

//添加滾動條事件 
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, 
//鼠標(biāo)滾輪事件 
mousewheel = firefox ? 'DOMMouseScroll' : 'mousewheel', 
//opera瀏覽器 
opera = window.oprea && navigator.userAgent.indexOf('MSIE') === -1, 
//is firing mousedown event 
firing = false, 
//鼠標(biāo)點擊，定時器執(zhí)行時間 
interval, 
//滾動條距離容器高度 
top, 
//滾動條當(dāng)前top值 
cur, 
//每次滾動多少像素 
speed = 18; 

//變量緩存min, max 
this.limits[s] = { 
min: 0, 
max: max 
} 
//scroll事件 鼠標(biāo)滑動滾輪移動滾動條 
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 - speed 
if(top < min) { 
top = min 
} 
}else{//向下滾動 
top = cur + speed 
if(top > max) { 
top = max 
} 
} 
s.style.top = top + 'px' 
that.doScroll(sbody, top * unit) 

//阻止body元素滾動條滾動 
event.preventDefault() 
}) 

//ie6, 7, 8下，如果鼠標(biāo)連續(xù)點擊兩次且時間間隔太短，則第二次事件不會觸發(fā) 
//拖動滾動條，點擊滾動條可到達區(qū)域 
squid.on(list, 'mousedown', function(event) { 
var target = event.target, 
y = event.clientY; 

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

//鼠標(biāo)點擊元素是滾動條 
if(target === s) { 
//invoke elem setCapture 
s.setCapture && s.setCapture() 

that.scrolling.diffy = y - s.offsetTop 
//鼠標(biāo)移動過程中判斷是否正在拖動滾動條 
that.scrolling.elem = s 
}else if(target.className.match('jscroll-list')){ 
firing = true 
interval = setInterval(function() { 
if(firing) { 
that.mouseHandle(list, y, unit) 
} 
}, 80) 
} 
}) 

//鼠標(biāo)松開滾動條停止?jié)L動 
squid.on(list, 'mouseup', function() { 
//invoke elem releaseCapture 
s.releaseCapture && s.releaseCapture() 

firing = false 
clearInterval(interval) 
}) 

//滾動條元素獲取焦點，可以觸發(fā)keyup事件 
squid.on(s, 'click', function() { 
this.focus() 
}) 

//滾動條獲取焦點后，觸發(fā)鍵盤上下鍵，滾動條滾動 
squid.on(s, 'keydown', function(event) { 
var keyCode = event.keyCode, 
state = false; 

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

event.preventDefault() 
}) 
}

regEvent()方法實現(xiàn)了以下功能，應(yīng)該是jscroll組件的核心方法了：

1. 鼠標(biāo)在包含滾動條的元素區(qū)域，上下滾動鼠標(biāo)滾輪，查看的內(nèi)容跟隨滾輪上下翻的功能

2. 點擊滾動條可到達區(qū)域，即滾動條上方或者下方，滾動條和查看的內(nèi)容向上或者向下滾動。鼠標(biāo)點擊滾動條可到達區(qū)域不松開，可連續(xù)滾動滾動條和查看的內(nèi)容，通過調(diào)用mouseHandle()方法來具體實現(xiàn)該功能。

3. 點擊滾動條元素后，可以通過鍵盤上下鍵來觸發(fā)滾動條和查看內(nèi)容的滾動

復(fù)制代碼代碼如下:

//鼠標(biāo)點擊滾動條可到達區(qū)域上面或者下面時，滾動條滾動 
mouseHandle: function(elem, place, unit) { 
var prev = elem.previousSibling, 
//包含滾動條顯示內(nèi)容元素 
a = prev.tagName.toLowerCase() === 'div' ? prev : prev.previousSibling, 
// 
n = elem.firstChild, 
//滾動條元素 
s = this.ie6 ? n.lastChild : n.tagName.toLowerCase() === 'div' ? n : n.nextSibling, 
//滾動條高度 
height, 
//list元素距body的top值 
value, 
//滾動條距離容器高度 
top, 
//滾動條距body的top值 
sTop, 
//滾動條滾動最小值 
min, 
//滾動條滾動最大值 
max, 
//每點擊滾動條可到達區(qū)域，滾動條向下或向上移動10px 
step = 10, 
//鼠標(biāo)點擊滾動條可到達區(qū)域距離最頂端或者最底端小于distance時，滾動條能夠自動移動到最頂端或者最低端 
distance = 20; 

min = this.limits[s].min 
max = this.limits[s].max 
height = s.offsetHeight 
top = parseInt(s.style.top || 0, 10) 
value = squid.getOffset(elem).top 
sTop = squid.getOffset(s).top 
//鼠標(biāo)點擊滾動條下方區(qū)域，滾動條向下滾動 
if(place > sTop) { 
if(value + elem.offsetHeight - place < distance && (elem.offsetHeight - height - top) < distance) { 
top = max 
}else{ 
if((sTop + height + step) <= place) { 
top += step 
}else{ 
top = place - value - height 
} 
} 
}else{ 
//鼠標(biāo)點擊區(qū)域距滾動條頂端小于滾動條長度時，滾動條自動滾動到最頂端 
if(place - value < distance && top < distance) { 
top = min 
}else{ 
//滾動條距頁面頂部高度減去鼠標(biāo)clientY值大于step 
if(sTop - place >= step) { 
top -= step 
}else{ 
top = place - value 
} 
} 
} 
if(top < min) { 
top = min 
}else if(top > max) { 
top = max 
} 

s.style.top = top + 'px' 
this.doScroll(a, top * unit) 
}

mouseHandle()方法通過判斷鼠標(biāo)點擊位置在頁面中的位置坐標(biāo)，和滾動條元素在頁面中的位置來判斷是點擊了滾動條的上方區(qū)域還是下方區(qū)域。如果點擊了下方區(qū)域則滾動條向下滾動，否則向上滾動，對于點擊的位置在上方區(qū)域或者下方區(qū)域小于distance值時，滾動條自動滾動到最小值或者最大值。

顯示效果

該控件的demo使用了淘寶網(wǎng)用戶注冊協(xié)議內(nèi)容，因為firefox、chrome等高級瀏覽器都能保證很好的兼容性和顯示效果，所以這里只展示ie低版本瀏覽器顯示效果， ie瀏覽器顯示截圖如下：

ie6下