nicescroll插件在容器的宽度转变时 滚动条的定位怎样自适应

2019年8月24日 219次阅读 来源: yujiao

这几天做项目碰到了一个关于nicescroll插件在容器宽度转变时，滚动条的位置没有转变这个题目，贴出本身的处理方案，愿望能对碰到和我一样题目的朋友们有所协助。

题目形貌：

《nicescroll插件在容器的宽度转变时 滚动条的定位怎样自适应》

如图，这个是我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,以及简朴经常使用的例子。

《nicescroll插件在容器的宽度转变时 滚动条的定位怎样自适应》

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>

结束语

写到这里，题目就处理好了。感谢朋友们的浏览，愿望对人人有所协助！
文章中有什么毛病的处所愿望朋友们可以帮我斧正！
迎接人人留言，假如我有写的不细致的处所迎接发问，我会尽快复兴的！
感谢！

    原文作者：yujiao
    原文地址: https://segmentfault.com/a/1190000013465520
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞