1.做項目時因為客戶要求改變了項目的整體樣式，所以導致瀏覽器自帶的滾動條樣式與項目的樣式風格格格不入，所以要使用一個滾動條插件來替換瀏覽器自帶的滾動條，我在網上搜了下，發現niceScroll這個滾動條插件還是十分完善的，也有很多人使用，大家可以在github上下載：點擊這里！
2.要使用滾動條插件，我們必須先引入插件的js文件，這里要注意的是niceScroll插件是基於jQuery的，所以我們必須在引入滾動條插件之前先引入jQuery的js文件。引入之后我們便可以使用滾動條了。在項目中要是先的就是父子div都帶有滾動條，如果只是簡單的對div的滾動條進行初始化的話，就回導致子div的滾動條錯位：
<!DOCTYPE html> <html> <head> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/jquery.nicescroll.min.js"></script> </head> <body> <div id="div1" style="width:100%;height:600px;overflow:auto;"> <h1>這里是滾動條插件niceScroll的測試頁面</h1> <h2>這里是滾動條插件niceScroll的測試頁面</h2> <h3>這里是滾動條插件niceScroll的測試頁面</h3> <h4>這里是滾動條插件niceScroll的測試頁面</h4> <h5>這里是滾動條插件niceScroll的測試頁面</h5> <h6>這里是滾動條插件niceScroll的測試頁面</h6> <p>這里是滾動條插件niceScroll的測試頁面</p> <span>這里是滾動條插件niceScroll的測試頁面</span> <h1>下面是帶有滾動條的子div</h1> <div id="div2" style="width:350px;height:200px;overflow:auto;border:1px solid red;"> <h1>我是帶有滾動條的子div</h1> <h2>我是帶有滾動條的子div</h2> <h3>我是帶有滾動條的子div</h3> <h4>我是帶有滾動條的子div</h4> <h5>我是帶有滾動條的子div</h5> <h6>我是帶有滾動條的子div</h6> </div> <h1>這里是滾動條插件niceScroll的測試頁面</h1> <h2>這里是滾動條插件niceScroll的測試頁面</h2> <h3>這里是滾動條插件niceScroll的測試頁面</h3> <h4>這里是滾動條插件niceScroll的測試頁面</h4> <h5>這里是滾動條插件niceScroll的測試頁面</h5> <h6>這里是滾動條插件niceScroll的測試頁面</h6> </div> </body> <script type"text-javascript"> $(function(){ $("#div1").niceScroll({ cursorborder:"", cursorcolor:"#00F", boxzoom:false, autohidemode: false }); $("#div2").niceScroll({ cursorborder:"", cursorcolor:"#00F", boxzoom:false, autohidemode: false }); }); </script> </html>
上面的問題導致子div的滾動條錯位了，然后發現滾動條的定位是絕對定位的，然后發現還有另為一種方法來初始化子div的滾動條，可以導致子div的滾動條不會錯位：
<!DOCTYPE html> <html> <head> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/jquery.nicescroll.min.js"></script> </head> <body> <div id="div1" style="width:100%;height:600px;overflow:auto;"> <h1>這里是滾動條插件niceScroll的測試頁面</h1> <h2>這里是滾動條插件niceScroll的測試頁面</h2> <h3>這里是滾動條插件niceScroll的測試頁面</h3> <h4>這里是滾動條插件niceScroll的測試頁面</h4> <h5>這里是滾動條插件niceScroll的測試頁面</h5> <h6>這里是滾動條插件niceScroll的測試頁面</h6> <p>這里是滾動條插件niceScroll的測試頁面</p> <span>這里是滾動條插件niceScroll的測試頁面</span> <h1>下面是帶有滾動條的子div</h1> <div id="div2" style="width:350px;height:200px;overflow:auto;border:1px solid red;"> <div id="warp"> <h1>我是帶有滾動條的子div</h1> <h2>我是帶有滾動條的子div</h2> <h3>我是帶有滾動條的子div</h3> <h4>我是帶有滾動條的子div</h4> <h5>我是帶有滾動條的子div</h5> <h6>我是帶有滾動條的子div</h6> </div> </div> <h1>這里是滾動條插件niceScroll的測試頁面</h1> <h2>這里是滾動條插件niceScroll的測試頁面</h2> <h3>這里是滾動條插件niceScroll的測試頁面</h3> <h4>這里是滾動條插件niceScroll的測試頁面</h4> <h5>這里是滾動條插件niceScroll的測試頁面</h5> <h6>這里是滾動條插件niceScroll的測試頁面</h6> </div> </body> <script type"text-javascript"> $(function(){ $("#div1").niceScroll({ cursorborder:"", cursorcolor:"#00F", boxzoom:false, autohidemode: false }); $("#div2").niceScroll('#warp', { cursorborder:"", cursorcolor:"#00F", boxzoom:false, autohidemode: false }); }); </script> </html>
上面的方式是在子div里面再嵌套一個div，然后初始化的時候實際上是把嵌套的div初始化了滾動條，子div的作用就是用來固定滾動條，使滾動條不錯位。之前的方式滾動條都是參照window來定位的，所以導致子div的滾動條錯位。