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>

结束语

写到这里，问题就解决好了。感谢朋友们的阅读，但愿对你们有所帮助！文章中有什么错误的地方但愿朋友们可以帮我指正！欢迎你们留言，若是我有写的不详细的地方欢迎提问，我会尽快回复的！谢谢！