jQuery niceScroll滚动条错位问题的解决方法
时间:2019-04-13
本文章向大家介绍jQuery niceScroll滚动条错位问题的解决方法,主要包括jQuery niceScroll滚动条错位问题的解决方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
虽然niceScroll插件很好用,毕竟它不依赖css,只是单纯的js就可以设置出好看的滚动条了。
最近在项目中使用到niceScroll,而且在表格里有横滚动条,竖滚动条时很容易错位,就是滚动条会悬浮在半空,并不是在div的底部或右边,打开f12可看到滚动条并不是直接定位在div里面,而是在整个body最后,和要使用定位的div同级,这而导致了这个bug,尤其是在IE下更明显,滚动条四处飞︿( ̄︶ ̄)︿。
在网上找了很多资料好像都没有这个情况,可能他们项目没那么多横向滚动条吧。。。。。
要解决这个bug,当时想到的就是把滚动条设在div里面,这样就不会悬浮。经过多次测试,后来发现在要设的div上去定位position:absolute,这样滚动条就会嵌套在里面,就不会出现乱悬浮错位的情况。
没有定位时候,滚动条在body最后,如图:
定位后的滚动条在div里面,如图:
我用的是wex5的grid表格,在grid那行添加类名gridPositon设为绝对定位,然后在它父级那设为相对定位,“子绝父相”。这样操作完是解决了滚动条悬浮错位的问题了,但是在IE下又出现新的bug,就是鼠标hover和
点击选中时没有颜色,(- -坑爹的ie),然后再套多两层div,这样就解决了ie下没颜色的问题。所以最后的结构如下:
总结:只要在用到的div绝对定位,滚动条就嵌套在里面。那个ie下没颜色是因为直接在它父级相对定位了,所以后来我改成在最外的window去相对定位了,这样就不用那么麻烦去修改它的结构。
以上这篇jQuery niceScroll滚动条错位问题的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- PHP获取时间戳的毫秒
- Python深入03 对象的属性
- CSS魔法堂:Position定位详解
- EMLOG无插件实现网站源码压缩
- CSS魔法堂:盒子模型简介
- 协议森林06 瑞士军刀 (ICMP协议)
- Emlog博客系统IIS 7/8伪静态
- Weblogic魔法堂:AdminServer.lok被锁导致启动、关闭域失败
- CentOS6.5菜鸟之旅:安装VirtualBox4.3
- CentOS6.5菜鸟之旅:VirtualBox4.3识别USB设备
- Eclipse魔法堂:修改主题
- 面试题(一)关于内部类的面试题
- MyBatis魔法堂:各数据库的批量Update操作
- 在Win7的IIS上搭建FTP服务及用户授权
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 跳表原理及C++实现
- MySQL 8.0 新特性:WriteSet 复制
- leetcode: explore-array-30 有效的数独
- leetcode: explore-array-29 两数之和
- leetcode: explore-array-28 移动零
- leetcode: explore-array-27 加一
- leetcode: explore-array-26 列表取交集 II
- leetcode 找出唯一一个只出现一次的数字
- leetcode: 找出不重复的列表
- Python “原地”旋转数组
- Python backoff 实现轮询
- Python argparse 模块
- 3分钟快速搭建 linux 虚拟环境
- 每日一题:如何实现异步任务处理来解决耗时操作问题
- 每日一题:如何查看端口占用及相关命令介绍