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>
结束语
写到这里，问题就解决好了。感谢朋友们的阅读，希望对大家有所帮助！
文章中有什么错误的地方希望朋友们能够帮我指正！
欢迎大家留言，如果我有写的不详细的地方欢迎提问，我会尽快回复的！
谢谢！