今天為大家分享一下我自己制作的瀏覽器滾動(dòng)條,我們知道用css來(lái)自定義滾動(dòng)條也是挺好的方式,css雖然能夠改變chrome瀏覽器的滾動(dòng)條樣式可以自定義,css也能夠改變IE瀏覽器滾動(dòng)條的顏色。但是css只能是改變IE瀏覽器的顏色,而且CSS不能做到改變火狐瀏覽器的樣式和顏色。所以只能是通過(guò)JavaScript來(lái)實(shí)現(xiàn)了。也有插件可以做到。我分享一下我自己使用原生JavaScript實(shí)現(xiàn)的思路。先上個(gè)圖看下效果:

iOS培訓(xùn),Swift培訓(xùn),蘋果開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn)

JavaScript實(shí)現(xiàn)的思路就是模擬瀏覽器自身滾動(dòng)條。我制作的思路是先將整個(gè)文檔放在一個(gè)容器里面,然后通過(guò)改變?nèi)萜骼锩娴膁iv的top值來(lái)實(shí)現(xiàn)滾動(dòng)效果布局如下:

iOS培訓(xùn),Swift培訓(xùn),蘋果開(kāi)發(fā)培訓(xùn),移動(dòng)開(kāi)發(fā)培訓(xùn)

 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
        
		

網(wǎng)友評(píng)論