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插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
js和jquery中获取非行间样式
May 05 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
基于jQuery实现可编辑的表格
Dec 11 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
PHP STRING 陷阱原理说明
2010/07/24 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python实现给文件添加内容及得到文件信息的方法
2015/05/28 Python
python记录程序运行时间的三种方法
2017/07/14 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
pandas中ix的使用详细讲解
2020/03/09 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
小学生自我鉴定
2013/10/12 职场文书
物流专业大学的自我评价
2014/01/11 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
服务之星事迹材料
2014/05/03 职场文书
图书馆标语
2014/06/19 职场文书
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers