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点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery手风琴的简单制作
May 12 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 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
使用 php4 加速 web 传输
2006/10/09 PHP
NOT NULL 和NULL
2007/01/15 PHP
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
javascript FormatNumber函数实现方法
2008/12/30 Javascript
jquery 最简单易用的表单验证插件
2010/02/27 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
Python编程实现正则删除命令功能
2017/08/30 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
我爱我的祖国演讲稿
2014/05/04 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
幼师求职自荐信
2014/05/31 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
甲午风云观后感
2015/06/02 职场文书
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers