雖然niceScroll插件很好用，畢竟它不依賴(lài)css,只是單純的js就可以設(shè)置出好看的滾動(dòng)條了。

最近在項(xiàng)目中使用到niceScroll，而且在表格里有橫滾動(dòng)條，豎滾動(dòng)條時(shí)很容易錯(cuò)位，就是滾動(dòng)條會(huì)懸浮在半空，并不是在div的底部或右邊，打開(kāi)f12可看到滾動(dòng)條并不是直接定位在div里面，而是在整個(gè)body最后，和要使用定位的div同級(jí)，這而導(dǎo)致了這個(gè)bug，尤其是在IE下更明顯，滾動(dòng)條四處飛︿(￣︶￣)︿。

在網(wǎng)上找了很多資料好像都沒(méi)有這個(gè)情況，可能他們項(xiàng)目沒(méi)那么多橫向滾動(dòng)條吧。。。。。

要解決這個(gè)bug，當(dāng)時(shí)想到的就是把滾動(dòng)條設(shè)在div里面，這樣就不會(huì)懸浮。經(jīng)過(guò)多次測(cè)試，后來(lái)發(fā)現(xiàn)在要設(shè)的div上去定位position:absolute，這樣滾動(dòng)條就會(huì)嵌套在里面，就不會(huì)出現(xiàn)亂懸浮錯(cuò)位的情況。

沒(méi)有定位時(shí)候，滾動(dòng)條在body最后，如圖：

定位后的滾動(dòng)條在div里面，如圖：

我用的是wex5的grid表格，在grid那行添加類(lèi)名gridPositon設(shè)為絕對(duì)定位，然后在它父級(jí)那設(shè)為相對(duì)定位，“子絕父相”。這樣操作完是解決了滾動(dòng)條懸浮錯(cuò)位的問(wèn)題了，但是在IE下又出現(xiàn)新的bug,就是鼠標(biāo)hover和

點(diǎn)擊選中時(shí)沒(méi)有顏色，（- -坑爹的ie），然后再套多兩層div，這樣就解決了ie下沒(méi)顏色的問(wèn)題。所以最后的結(jié)構(gòu)如下：

總結(jié)：只要在用到的div絕對(duì)定位，滾動(dòng)條就嵌套在里面。那個(gè)ie下沒(méi)顏色是因?yàn)橹苯釉谒讣?jí)相對(duì)定位了，所以后來(lái)我改成在最外的window去相對(duì)定位了，這樣就不用那么麻煩去修改它的結(jié)構(gòu)。

以上這篇jQuery niceScroll滾動(dòng)條錯(cuò)位問(wèn)題的解決方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論