今天為大家分享一下我自己制作的瀏覽器滾動(dòng)條,我們知道用css來(lái)自定義滾動(dòng)條也是挺好的方式,css雖然能夠改變chrome瀏覽器的滾動(dòng)條樣式可以自定義,css也能夠改變IE瀏覽器滾動(dòng)條的顏色。但是css只能是改變IE瀏覽器的顏色,而且CSS不能做到改變火狐瀏覽器的樣式和顏色。所以只能是通過JavaScript來(lái)實(shí)現(xiàn)了。也有插件可以做到。我分享一下我自己使用原生JavaScript實(shí)現(xiàn)的思路。先上個(gè)圖看下效果:
JavaScript實(shí)現(xiàn)的思路就是模擬瀏覽器自身滾動(dòng)條。我制作的思路是先將整個(gè)文檔放在一個(gè)容器里面,然后通過改變?nèi)萜骼锩娴膁iv的top值來(lái)實(shí)現(xiàn)滾動(dòng)效果布局如下:
1 <style> 2 *{ 3 margin:0; 4 padding:0; 5 } 6 body{ 7 overflow:hidden; 9 }10 #box{11 float:right;12 top:0;13 right:0;14 width:20px;15 background:#ccc;16 position:relative;17 }18 #drag{19 position: a