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 Tree Multiselect使用详解
May 02 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
jQuery实现动态操作table行
Nov 23 jQuery
jquery实现拖拽添加元素功能
Dec 01 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 JSON 数据解析代码
2010/05/26 PHP
php实现telnet功能示例
2014/04/08 PHP
PHP 使用redis简单示例分享
2015/03/05 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
python中根据字符串调用函数的实现方法
2016/06/12 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
详解Python自建logging模块
2018/01/29 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
python实现京东秒杀功能
2018/07/30 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
python unichr函数知识点总结
2020/12/16 Python
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
初中生学习的自我评价
2013/11/14 职场文书
司机岗位职责
2013/11/15 职场文书
作弊检讨书1000字
2014/02/01 职场文书
学生会干部自荐信
2014/02/04 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
会计毕业自我鉴定
2014/02/05 职场文书
怎样填写就业意向
2014/04/02 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
危货运输企业安全生产责任书
2014/07/28 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
小学教师见习总结
2015/06/23 职场文书
php解析非标准json、非规范json的方式实例
2022/05/10 PHP