jQuery niceScroll滚动条错位问题的解决方法
虽然niceScroll插件很好用,毕竟它不依赖css,只是单纯的js就可以设置出好看的滚动条了。
最近在项目中使用到niceScroll,而且在表格里有横滚动条,竖滚动条时很容易错位,就是滚动条会悬浮在半空,并不是在div的底部或右边,打开f12可看到滚动条并不是直接定位在div里面,而是在整个body最后,和要使用定位的div同级,这而导致了这个bug,尤其是在IE下更明显,滚动条四处飞︿( ̄︶ ̄)︿。
在网上找了很多资料好像都没有这个情况,可能他们项目没那么多横向滚动条吧。。。。。
要解决这个bug,当时想到的就是把滚动条设在div里面,这样就不会悬浮。经过多次测试,后来发现在要设的div上去定位position:absolute,这样滚动条就会嵌套在里面,就不会出现乱悬浮错位的情况。
没有定位时候,滚动条在body最后,如图:
定位后的滚动条在div里面,如图:
我用的是wex5的grid表格,在grid那行添加类名gridPositon设为绝对定位,然后在它父级那设为相对定位,“子绝父相”。这样操作完是解决了滚动条悬浮错位的问题了,但是在IE下又出现新的bug,就是鼠标hover和
点击选中时没有颜色,(- -坑爹的ie),然后再套多两层div,这样就解决了ie下没颜色的问题。所以最后的结构如下:
总结:只要在用到的div绝对定位,滚动条就嵌套在里面。那个ie下没颜色是因为直接在它父级相对定位了,所以后来我改成在最外的window去相对定位了,这样就不用那么麻烦去修改它的结构。
以上这篇jQuery niceScroll滚动条错位问题的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- jQuery中Nicescroll滚动条插件的用法
- jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
- jquery滚动条插件jScrollPane的使用介绍
- jQuery滚动条插件nanoscroller使用指南
- 学习使用jquery iScroll.js移动端滚动条插件
- jquery滚动条插件slimScroll使用方法
- jQuery iScroll.js 移动端滚动条美化插件
- jquery自定义滚动条插件示例分享
- jquery滚动条插件(可以自定义)
- jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
- jQuery滚动条美化插件nicescroll简单用法示例
相关文章
使用jquery局部刷新(jquery.load)从数据库取出数据
jquery提供了很好的ajax交互,我这里用的是直接返回字符串,用的是jquery.load方法从数据库取出的数据2014-01-01基于jquery的一个OutlookBar类,动态创建导航条
初学jquery,如有错误,请高手们指出想看效果及完整代码的可以下载rar包2010-11-11JQuery为textarea添加maxlength属性的代码
textarea默认不支持maxlength属性。所以通过jquery实现下。具体的看代码。2010-04-04
最新评论