jQuery niceScroll滚动条错位问题的解决方法


Posted in jQuery onFebruary 03, 2018

虽然niceScroll插件很好用,毕竟它不依赖css,只是单纯的js就可以设置出好看的滚动条了。

最近在项目中使用到niceScroll,而且在表格里有横滚动条,竖滚动条时很容易错位,就是滚动条会悬浮在半空,并不是在div的底部或右边,打开f12可看到滚动条并不是直接定位在div里面,而是在整个body最后,和要使用定位的div同级,这而导致了这个bug,尤其是在IE下更明显,滚动条四处飞︿( ̄︶ ̄)︿。

在网上找了很多资料好像都没有这个情况,可能他们项目没那么多横向滚动条吧。。。。。

要解决这个bug,当时想到的就是把滚动条设在div里面,这样就不会悬浮。经过多次测试,后来发现在要设的div上去定位position:absolute,这样滚动条就会嵌套在里面,就不会出现乱悬浮错位的情况。

没有定位时候,滚动条在body最后,如图:

jQuery niceScroll滚动条错位问题的解决方法

定位后的滚动条在div里面,如图:

jQuery niceScroll滚动条错位问题的解决方法

我用的是wex5的grid表格,在grid那行添加类名gridPositon设为绝对定位,然后在它父级那设为相对定位,“子绝父相”。这样操作完是解决了滚动条悬浮错位的问题了,但是在IE下又出现新的bug,就是鼠标hover和

点击选中时没有颜色,(- -坑爹的ie),然后再套多两层div,这样就解决了ie下没颜色的问题。所以最后的结构如下:

jQuery niceScroll滚动条错位问题的解决方法

总结:只要在用到的div绝对定位,滚动条就嵌套在里面。那个ie下没颜色是因为直接在它父级相对定位了,所以后来我改成在最外的window去相对定位了,这样就不用那么麻烦去修改它的结构。

以上这篇jQuery niceScroll滚动条错位问题的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
基于jQuery实现瀑布流页面
Apr 11 jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jQuery中event.target和this的区别详解
Aug 13 jQuery
详解jQuery的核心函数和事件处理
Feb 18 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 #jQuery
jquery.picsign图片标注组件实例详解
Feb 02 #jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 #jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 #jQuery
jQuery与vue实现拖动验证码功能
Jan 30 #jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 #jQuery
jQuery代码优化方法总结
Jan 29 #jQuery
You might like
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
加强版phplib的DB类
2008/03/31 PHP
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
php去除HTML标签实例
2013/11/06 PHP
PHP中session变量的销毁
2014/02/27 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
在javascript中对于DOM的加强
2013/04/11 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
Angular网络请求的封装方法
2018/05/22 Javascript
Linux下Python获取IP地址的代码
2014/11/30 Python
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
pymongo中group by的操作方法教程
2019/03/22 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
Python continue语句实例用法
2020/02/06 Python
python对Excel的读取的示例代码
2020/02/14 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
Python发送邮件实现基础解析
2020/08/14 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
植物选择:Botanic Choice
2017/02/15 全球购物
校园十佳歌手策划书
2014/01/22 职场文书
教育技术职业规划范文
2014/03/04 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
广告业务员岗位职责
2015/02/13 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server