nicescroll插件在容器的宽度改变时滚动条的定位如何自适应

graf 发布于2019-08-22 14:59 / 540人阅读

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

问题描述：

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

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

左侧菜单收起来后，底部菜单的定位要变成left:0;同时底部菜单的宽度要在原有基础上加上左侧菜单的宽度（就相当于底部菜单的定位和宽度都改变了），但是如图，我的滚动条并没有随着我容器宽度的改变而改变。

代码

问题代码是这样写的：

1.js部分

2.css部分

容器一定要写宽高，要写上overflow: auto;

3.html部分


你的内容

改正后的代码

1.js部分

boxzoom最好设置为false，不然双击容器时，容器中的内容会放大，朋友们可以换成true感受下效果。

nicescroll插件的下载地址：https://github.com/inuyaksa/j...。

建议亲下载3.7.6这个demo,如图所示，这里面包含使用nicescroll需要引用的js,以及简单常用的例子。

2.css部分

3.html部分



你的内容

结束语

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

容器云 html的宽度自适应自适应宽度宽度自适应自适应宽度按钮

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93061.html

jquery插件Nicescroll 3(非常类似IOS原生的滚动条) （转）

摘要：使用了很多的滚动条插件，如这次说说，支持水平滚动条，支持文本区和文档页面滚动条。，兼容所有的桌面浏览器。，兼容移动设备黑莓手机和芒果。，兼容所有触摸设备平板电脑窗口接口。，简单的安装和激活不破坏代码。使用了很多的滚动条插件，如Iscroll,swiper,这次说说Nicescroll 1，支持水平滚动条! 2，支持div,IFrames,文本区和文档页面滚动条。 3，兼容所有的桌面...

B0B0 2019-08-21 10:54 评论0 收藏0
CSS Position（定位）

摘要：定位的起始位置为此元素原先在档流的位置。忽略和从父元素继承该属性的值以上的和可以使得元素脱离文档流。绝对定位脱离档流的布局，遗留下来的空间由后的元素填充。默认定位表示此元素为默认定位式。 Position（定位） position可以取五个值参数描述 absolute 绝对定位；脱离⽂档流的布局，遗留下来的空间由后⾯的元素填充。定位的起始位置为最近的⽗元素(postio...

lpjustdoit 2019-08-29 18:39 评论0 收藏0
移动端布局与适配

摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。移动端页面适配—...

Clect 2019-08-29 14:08 评论0 收藏0
可视化效果(Visual effects)

摘要：一般地，一个块盒的内容都被限制在该盒的边内。这种盒并不一定会根据其祖先的属性裁剪。默认情况下，元素不会被裁剪。在闭合路径内的内容会显示，而路径外边的都会被剪掉著作权归作者所有。 Overflow and clipping 一般地，一个块盒的内容都被限制在该盒的content边内。某些情况下，一个盒可能会溢出，意味着它的部分内容或者全部内容位于该盒外部，例如：一行无法拆分，导致行盒比...

JowayYoung 2019-08-29 12:37 评论0 收藏0
CSS原生布局方式

摘要：布局任何元素在默认的情况下都是处于整个文档流中的，不会浮动的。相对定位如果想为元素设置层级布局模型中的相对定位，需要设置表示相对定位，它通过属性确定元素在正常文档流中的偏移位置。 showImg(https://segmentfault.com/img/remote/1460000009753577); 前言网页原生布局的方法其实网上有很多，大概为Flow（流动布局模型）、Float...

PingCAP 2019-08-20 17:14 评论0 收藏0