android 滚动条自定义样式,IScroll的使用-方向键绑定自定义滚动条样式
之前在webkit上開發一個滾動控件，需要完成的是一段文字，上下鍵可以滾動，且自定義滾動條。第一想法就是瀏覽器原生overflow：scroll，且webkit支持自定義滾動條樣式：
webkit自定義滾動條樣式：
CSS
/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/
::-webkit-scrollbar
{
width: 0.05rem;
height:1rem;
background-color: transparent;
}
/*定義滾動條軌道 內陰影+圓角*/
::-webkit-scrollbar-track
{
background-color: transparent;
}
/*定義滑塊 內陰影+圓角*/
::-webkit-scrollbar-thumb
{
border-radius: 0.1rem;
/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/
background-color: rgba(255,255,255,0.6);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/
::-webkit-scrollbar
{
width:0.05rem;
height:1rem;
background-color:transparent;
}
/*定義滾動條軌道 內陰影+圓角*/
::-webkit-scrollbar-track
{
background-color:transparent;
}
/*定義滑塊 內陰影+圓角*/
::-webkit-scrollbar-thumb
{
border-radius:0.1rem;
/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/
background-color:rgba(255,255,255,0.6);
}
后來換了個引擎，發現其他引擎不支持自定義滾動條，那就滿足不了UED的要求了。來同事推薦使用IScroll，用了一下，確實比較方便，與平臺無關，可操作的屬性還有性能都很理想，記錄一下：
首先看官方文檔?https://iiunknown.gitbooks.io/iscroll-5-api-cn/content/versions.html
github地址：https://github.com/cubiq/iscroll
demo：http://cubiq.org/dropbox/iscroll4/examples/simple/
直接拿demo中的iscroll.js套到自己的工程上，一個段落就是一個li，new 一下就完事了，滾動拖動也很happy。然后發現，我按上下方向鍵沒有響應。
IScroll按鍵事件綁定：
查源碼看iscroll的事件處理，都在handleEvent函數里面
JavaScript
handleEvent: function (e) {
var that = this;
switch(e.type) {
case START_EV:
if (!hasTouch && e.button !== 0) return;
that._start(e);
break;
case MOVE_EV: that._move(e); break;
case END_EV:
case CANCEL_EV: that._end(e); break;
case RESIZE_EV: that._resize(); break;
case WHEEL_EV: that._wheel(e); break;
case 'mouseout': that._mouseout(e); break;
case TRNEND_EV: that._transitionEnd(e); break;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
handleEvent:function(e){
varthat=this;
switch(e.type){
caseSTART_EV:
if(!hasTouch&& e.button !== 0) return;
that._start(e);
break;
caseMOVE_EV:that._move(e);break;
caseEND_EV:
caseCANCEL_EV:that._end(e);break;
caseRESIZE_EV:that._resize();break;
caseWHEEL_EV:that._wheel(e);break;
case'mouseout':that._mouseout(e);break;
caseTRNEND_EV:that._transitionEnd(e);break;
}
}
根本就沒有keyEvent，看來偷懶是不行的，官方文檔看一下，原來iscroll有5個版本，各自平臺都是不一樣的，demo中這個估計是移動平臺用的iscroll-lite版本，移動平臺根本不鳥方向鍵的。
去github上down下來源碼，找了找，build目錄下，5個版本都有。用最原始的common版本，這個版本的handleEvent就豐富多了：
JavaScript
handleEvent: function (e) {
switch ( e.type ) {
case 'touchstart':
case 'pointerdown':
case 'MSPointerDown':
case 'mousedown':
this._start(e);
break;
case 'touchmove':
case 'pointermove':
case 'MSPointerMove':
case 'mousemove':
this._move(e);
break;
case 'touchend':
case 'pointerup':
case 'MSPointerUp':
case 'mouseup':
case 'touchcancel':
case 'pointercancel':
case 'MSPointerCancel':
case 'mousecancel':
this._end(e);
break;
case 'orientationchange':
case 'resize':
this._resize();
break;
case 'transitionend':
case 'webkitTransitionEnd':
case 'oTransitionEnd':
case 'MSTransitionEnd':
this._transitionEnd(e);
break;
case 'wheel':
case 'DOMMouseScroll':
case 'mousewheel':
this._wheel(e);
break;
case 'keydown':
this._key(e);
break;
case 'click':
if ( !e._constructed ) {
e.preventDefault();
e.stopPropagation();
}
break;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
handleEvent:function(e){
switch(e.type){
case'touchstart':
case'pointerdown':
case'MSPointerDown':
case'mousedown':
this._start(e);
break;
case'touchmove':
case'pointermove':
case'MSPointerMove':
case'mousemove':
this._move(e);
break;
case'touchend':
case'pointerup':
case'MSPointerUp':
case'mouseup':
case'touchcancel':
case'pointercancel':
case'MSPointerCancel':
case'mousecancel':
this._end(e);
break;
case'orientationchange':
case'resize':
this._resize();
break;
case'transitionend':
case'webkitTransitionEnd':
case'oTransitionEnd':
case'MSTransitionEnd':
this._transitionEnd(e);
break;
case'wheel':
case'DOMMouseScroll':
case'mousewheel':
this._wheel(e);
break;
case'keydown':
this._key(e);
break;
case'click':
if(!e._constructed){
e.preventDefault();
e.stopPropagation();
}
break;
}
}
然后套用上去，可以支持方向鍵了。中間遇到兩個小問題，第一個是按鍵一直沒反應，檢查下是z-index太小，keyEvent被上層元素拿走了；第二個是只有在#warpper拿到focus的時候才響應按鍵，但我用的引擎不支持focus，這個也不難，頁面強行綁定handleEvent：
JavaScript
document.addEventListener("keydown", function(evt) {
if (evt.keyCode === keyCodes.ENTER) {
} else {
myScroll && myScroll.handleEvent(evt);
}
}, false);
1
2
3
4
5
6
document.addEventListener("keydown",function(evt){
if(evt.keyCode===keyCodes.ENTER){
}else{
myScroll&& myScroll.handleEvent(evt);
}
},false);
然后整個頁面隨便按什么鍵，都可以響應了。接下來就是滾動條樣式的問題了，這個也簡單，跟著官方文檔&樣例走就行
http://lab.cubiq.org/iscroll5/demos/styled-scrollbars/
關鍵步驟有三個：
1.option
JavaScript
myScroll = new IScroll(document.getElementById('wrapper'), {
keyBindings: true, // 綁定按鍵事件
scrollbars: 'custom', // 自定義樣式
resizeScrollbars: false // 是否自動縮放滾動條
});
1
2
3
4
5
myScroll=newIScroll(document.getElementById('wrapper'),{
keyBindings:true,// 綁定按鍵事件
scrollbars:'custom',// 自定義樣式
resizeScrollbars:false// 是否自動縮放滾動條
});
設置了scrollbars: 'custom'，在頁面的Elements就可以找到
里面還包含了
第一個是滾動區域，第二個是滾動條。拿到Element就好辦了，css給定樣式：
CSS
.iScrollVerticalScrollbar {
position: absolute;
z-index: 9999;
width: 0.1rem;
bottom: 2px;
top: 2px;
right: 0;
overflow: hidden;
}
.iScrollIndicator {
position: absolute;
width: 0.08rem; height: 0.3rem;
background: rgba(255,255,255,0.6);
border-radius: 0.1rem;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.iScrollVerticalScrollbar{
position:absolute;
z-index:9999;
width:0.1rem;
bottom:2px;
top:2px;
right:0;
overflow:hidden;
}
.iScrollIndicator{
position:absolute;
width:0.08rem;height:0.3rem;
background:rgba(255,255,255,0.6);
border-radius:0.1rem;
}
大功告成！
當然，IScroll不止這點功能，官方文檔后面還有無限滾動等高級用法，以后用到再添加。
總結
以上是生活随笔為你收集整理的android 滚动条自定义样式,IScroll的使用-方向键绑定自定义滚动条样式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： R 学习 - 线图
- 下一篇： macOS Monterey新问题：“内