nicescroll插件在容器的寬度改變時 滾動條的定位如何自適應

這幾天作項目遇到了一個關於nicescroll插件在容器寬度改變時，滾動條的位置沒有改變這個問題，貼出本身的解決方案，但願能對遇到和我同樣問題的朋友們有所幫助。

問題描述：

如圖，這個是我nicescroll自定義樣式的滾動條

當我點擊這個如圖標註的這個圖標後，左側菜單會收起來

左側菜單收起來後，底部菜單的定位要變成left:0;同時底部菜單的寬度要在原有基礎上加上左側菜單的寬度（就至關於底部菜單的定位和寬度都改變了），可是如圖，個人滾動條並無隨着我容器寬度的改變而改變。

代碼

問題代碼是這樣寫的：

1.js部分

<script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/jquery.nicescroll.min.js"></script>
     <script>
      $(document).ready(function() {
      $("#boxscroll").niceScroll({cursorborder:"",cursorcolor:"#4e4e5b",boxzoom:false});
     })
     </script>

2.css部分

<style>
#boxscroll {
    height: 20px;
    width: 300px;
    border: 2px solid #00F;
    overflow: auto;
}
</style>

• 容器必定要寫寬高，要寫上overflow: auto;

3.html部分

<div id="boxscroll">
你的內容
</div>

改正後的代碼

1.js部分

<script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/jquery.nicescroll.min.js"></script>
     <script>
      $(document).ready(function() {
     $("#boxscroll").niceScroll("#boxscrollContent",{cursorborder:"",cursorcolor:"#4e4e5b",boxzoom:false,touchbehavior:true}); 
    })
     </script>

• boxzoom最好設置爲false，否則雙擊容器時，容器中的內容會放大，朋友們能夠換成true感覺下效果。
• nicescroll插件的下載地址：https://github.com/inuyaksa/j...。
• 建議親下載3.7.6這個demo,如圖所示，這裏麪包含使用nicescroll須要引用的js,以及簡單經常使用的例子。

2.css部分

<style>
#boxscroll {
    height: 20px;
    width: 300px;
    border: 2px solid #00F;
    overflow: auto;
}
</style>

3.html部分

<div id="boxscroll">
<div id="boxscrollContent">
你的內容
</div>
</div>

結束語

寫到這裏，問題就解決好了。感謝朋友們的閱讀，但願對你們有所幫助！文章中有什麼錯誤的地方但願朋友們可以幫我指正！歡迎你們留言，若是我有寫的不詳細的地方歡迎提問，我會盡快回復的！謝謝！