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.serializeJSON
Jun 23 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 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版
2006/10/09 PHP
在PHP中执行系统外部命令
2006/10/09 PHP
php cli换行示例
2014/04/22 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
Javascript 继承机制实例
2009/08/12 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
2016/07/27 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
原生js实现无缝轮播图效果
2021/01/28 Javascript
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
Python遍历目录的4种方法实例介绍
2015/04/13 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
俄罗斯优惠券网站:BIGLION
2017/05/21 全球购物
产假请假条
2014/04/10 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
医德医风自我评价
2014/09/19 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
创业计划书介绍
2019/04/24 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python