<html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>scroller
title
>
<
style
>
.container
.view
.buffer-view
.actual-domain
style
>
head
>
<
body
>
<
div
class
="container"
>
<
div
class
>
<
div
class
="buffer-view"
>
div>
<
div
class
="view"
>
<
div
class
="actual-domain"
>
div>
div>
div>
div>
<
script
src="z.js"
>
script
>
<
script
>
varcount
=1000000
; //
資料長度
vardata =(
function
() ;
return
arr;
})();
varprebuffer =5
;
//預快取10條記錄
varrow_height =21
;
//每行元素高度：根據實際取值
varprebuffer_height
=prebuffer
*row_height;
//前後預快取元素高度
varprebuffer_height_twice
=prebuffer_height *2
;
//前後預快取之和高度
varview_height =$(
'.view
').height();
//可視區檢視高度
varbufferview =$(
'.buffer-view
').height($.nearestmodulo(view_height, row_height)
+prebuffer_height*2
);
varactualdomain_height
=data.length
*row_height;
//實際計算區域高度
varsize
=bufferview.height()
/row_height;
$('.actual-domain
').height(actualdomain_height);
$('.view
').on(
'scroll',
function
(evt)
else
if(bottom
<
prebuffer_height)
else
bufferview.css();
vardomain
=range(offset.top, offset.top
+view_height
+prebuffer_height_twice);
if(offset.top
+prebuffer_height_twice
+view_height
<=
actualdomain_height)
else
});function
range(start, end) 'li
', size);
bufferview.setdata(data.slice(
0, size));
script
>
body
>
html
>
需要引的js檔案：z.js
function$(selector) ;
}$.log = function
() ;
$.nearestmodulo = function
(num, module)
return val < module/2 ? num - val : num + (module - val);
}function
dom(selector)
function
on(evtname, handler, bobble)
function
offset() ;
}function
height(val)
else
}function
text(str)
function
css(attrs)
}}function
var docfrag =document.createdocumentfragment();
while (size--)
this
}function
setdata(data) );
}function
value()
滾動條樣式錦集
帶背景顏色的實線邊框滾動條 200px scrollbar shadow color 33cc33 color 006600 scrollbar 3dlight color 33cc33 scrollbar arrow color 33cc33 border bottom black 2px sol...
滾動條樣式錦集
1.帶背景顏色的實線邊框滾動條 200px scrollbar shadow color 33cc33 color 006600 scrollbar 3dlight color 33cc33 scrollbar arrow color 33cc33 border bottom black 2px s...
HTML實現滾動條
overflow scroll 這個屬性定義溢位元素內容區的內容會如何處理。如果值為 scroll 預設值為 visible 不論是否需要，使用者 都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。eg 這個屬性定義溢位元素內容區的內容會如何處理。如果值為 scroll ...