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 19 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 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
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
phpfpm的作用和用法
2019/10/10 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
Prototype Selector对象学习
2009/07/23 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
Python中转换角度为弧度的radians()方法
2015/05/18 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
商务助理岗位职责
2013/11/13 职场文书
关于元旦的广播稿
2014/02/16 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
财务部绩效考核方案
2014/05/04 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
新课程改革心得体会
2016/01/22 职场文书