这几天做项目遇到了一个关于nicescroll插件在容器宽度改变时，滚动条的位置没有改变这个问题，贴出自己的解决方案，希望能对遇到和我一样问题的朋友们有所帮助。

问题描述：

如图，这个是我nicescroll自定义样式的滚动条

当我点击这个如图标注的这个图标后，左侧菜单会收起来

@H_777_22@

左侧菜单收起来后，底部菜单的定位要变成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>

结束语

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