1.做项目时因为客户要求改变了项目的整体样式，所以导致浏览器自带的滚动条样式与项目的样式风格格格不入，所以要使用一个滚动条插件来替换浏览器自带的滚动条，我在网上搜了下，发现niceScroll这个滚动条插件还是十分完善的，也有很多人使用，大家可以在github上下载：点击这里！

　　2.要使用滚动条插件，我们必须先引入插件的js文件，这里要注意的是niceScroll插件是基于jQuery的，所以我们必须在引入滚动条插件之前先引入jQuery的js文件。引入之后我们便可以使用滚动条了。在项目中要是先的就是父子div都带有滚动条，如果只是简单的对div的滚动条进行初始化的话，就回导致子div的滚动条错位：

　　

<!DOCTYPE html>

<html>

    <head>

        <script src="js/jquery-1.9.1.min.js"></script>

        <script src="js/jquery.nicescroll.min.js"></script>

    </head>

    <body>

        <div id="div1" style="width:100%;height:600px;overflow:auto;">

            <h1>这里是滚动条插件niceScroll的测试页面</h1>

            <h2>这里是滚动条插件niceScroll的测试页面</h2>

            <h3>这里是滚动条插件niceScroll的测试页面</h3>

            <h4>这里是滚动条插件niceScroll的测试页面</h4>

            <h5>这里是滚动条插件niceScroll的测试页面</h5>

            <h6>这里是滚动条插件niceScroll的测试页面</h6>

            <p>这里是滚动条插件niceScroll的测试页面</p>

            <span>这里是滚动条插件niceScroll的测试页面</span>

            <h1>下面是带有滚动条的子div</h1>

            <div  id="div2" style="width:350px;height:200px;overflow:auto;border:1px solid red;">

                <h1>我是带有滚动条的子div</h1>

                <h2>我是带有滚动条的子div</h2>

                <h3>我是带有滚动条的子div</h3>

                <h4>我是带有滚动条的子div</h4>

                <h5>我是带有滚动条的子div</h5>

                <h6>我是带有滚动条的子div</h6>

            </div>

            <h1>这里是滚动条插件niceScroll的测试页面</h1>

            <h2>这里是滚动条插件niceScroll的测试页面</h2>

            <h3>这里是滚动条插件niceScroll的测试页面</h3>

            <h4>这里是滚动条插件niceScroll的测试页面</h4>

            <h5>这里是滚动条插件niceScroll的测试页面</h5>

            <h6>这里是滚动条插件niceScroll的测试页面</h6>

        </div>

    </body>

    <script type"text-javascript">

        $(function(){

            $("#div1").niceScroll({

                cursorborder:"",

                cursorcolor:"#00F",

                boxzoom:false,

                autohidemode: false

            });

            $("#div2").niceScroll({

                cursorborder:"",

                cursorcolor:"#00F",

                boxzoom:false,

                autohidemode: false

            });

        });

    </script>

</html>

　　

　　上面的问题导致子div的滚动条错位了，然后发现滚动条的定位是绝对定位的，然后发现还有另为一种方法来初始化子div的滚动条，可以导致子div的滚动条不会错位：

　　

<!DOCTYPE html>

<html>

    <head>

        <script src="js/jquery-1.9.1.min.js"></script>

        <script src="js/jquery.nicescroll.min.js"></script>

    </head>

    <body>

        <div id="div1" style="width:100%;height:600px;overflow:auto;">

            <h1>这里是滚动条插件niceScroll的测试页面</h1>

            <h2>这里是滚动条插件niceScroll的测试页面</h2>

            <h3>这里是滚动条插件niceScroll的测试页面</h3>

            <h4>这里是滚动条插件niceScroll的测试页面</h4>

            <h5>这里是滚动条插件niceScroll的测试页面</h5>

            <h6>这里是滚动条插件niceScroll的测试页面</h6>

            <p>这里是滚动条插件niceScroll的测试页面</p>

            <span>这里是滚动条插件niceScroll的测试页面</span>

            <h1>下面是带有滚动条的子div</h1>

            <div  id="div2" style="width:350px;height:200px;overflow:auto;border:1px solid red;">

                <div id="warp">

                    <h1>我是带有滚动条的子div</h1>

                    <h2>我是带有滚动条的子div</h2>

                    <h3>我是带有滚动条的子div</h3>

                    <h4>我是带有滚动条的子div</h4>

                    <h5>我是带有滚动条的子div</h5>

                    <h6>我是带有滚动条的子div</h6>

                </div>

            </div>

            <h1>这里是滚动条插件niceScroll的测试页面</h1>

            <h2>这里是滚动条插件niceScroll的测试页面</h2>

            <h3>这里是滚动条插件niceScroll的测试页面</h3>

            <h4>这里是滚动条插件niceScroll的测试页面</h4>

            <h5>这里是滚动条插件niceScroll的测试页面</h5>

            <h6>这里是滚动条插件niceScroll的测试页面</h6>

        </div>

    </body>

    <script type"text-javascript">

        $(function(){

            $("#div1").niceScroll({

                cursorborder:"",

                cursorcolor:"#00F",

                boxzoom:false,

                autohidemode: false

            });

            $("#div2").niceScroll('#warp', {

                cursorborder:"",

                cursorcolor:"#00F",

                boxzoom:false,

                autohidemode: false

            });

        });

    </script>

</html>

　　上面的方式是在子div里面再嵌套一个div，然后初始化的时候实际上是把嵌套的div初始化了滚动条，子div的作用就是用来固定滚动条，使滚动条不错位。之前的方式滚动条都是参照window来定位的，所以导致子div的滚动条错位。

jQuery-niceScroll使用中父子div都存在滚动条导致错位的问题的更多相关文章

  1. 一款回到顶部的 jQuery 插件，支持 Div 中的滚动条回到顶部

    前言 今天在网上搜索“回到顶部”的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery 插件,经过自己的修 ...

  2. jQuery使用scrollTop获取div标签的滚动条已滚动高度（jQuery版本1.6+时，用prop()方法代替attr()方法）

    $("#content").append('<div>' + data.msg + '</div>'+.'<br>');$('#content' ...

  3. jquery.nicescroll.min.js滚动条使用方法

    jquery.nicescroll.min.js滚动条使用方法,Nicescroll 是制作自定义滚动条的jq插件.支持div,iframe,html等使用,兼容IE7-8,safari,firefo ...

  4. jquery.nicescroll.min.js滚动条插件的用法

    1.jquery.nicescroll.min.js源码 /* jquery.nicescroll 3.6.8 InuYaksa*2015 MIT http://nicescroll.areaaper ...

  5. 用jquery写循环播放div -2

    前面所说的class html元素标签的写法也要有层次性, 这个层次性其实也就是常说的 css类写法要有一个"命名空间, 名字空间" "namespace" 在 ...

  6. 用jquery写循环播放div的相关笔记 珍贵的总结 -1

    用jquery写循环播放div line-height应用的元素的 层次? line-heig字ht, 叫行高, 仅仅是指 文/文本, 而不管图片. line-height是容器中 文本行 与 文本行 ...

  7. DIV实现纵向滚动条overflow-y

    DIV实现纵向滚动条overflow-y:scroll的使用, 1.首先设置固定div的宽高2.overflow-y:scroll如果设置overflow:auto;表示当你内容超过div高度出现滚动 ...

  8. div如何加滚动条

    <div style="position:absolute; height:400px; overflow:auto"></div>div 设置滚动条显示: ...

  9. 判断div是否有滚动条

    判断div是否有滚动条 var obj=document.getElementById("showDiv"); if(obj.scrollHeight>obj.clientH ...

随机推荐

  1. Truffle基础篇-Truffle做什么的?怎么安装？

    Truffle基础篇-Truffle做什么的?怎么安装? truffle资料汇总 http://truffle.tryblockchain.org/truffle3.0-integrate-nodej ...

  2. 使用ListOperations操作redis

    使用ListOperations对象操作redis list: 方法 c参数 s说明   List<V> range(K key, long start, long end); K key ...

  3. C++编码规范101

    组织和策略问题 第0条 不要拘泥于小节(又名:了解哪些东西不应该标准化) 第1条 在高警告级别干净利落地进行编译 第2条 使用自动构建系统 第3条 使用版本控制系统 第4条 在代码审查上投入 设计风格 ...

  4. PHP判断类型的方法

    1.gettype():获取变量类型 2.is_array():判断变量类型是否为数组类型 3.is_double():判断变量类型是否为倍浮点类型 4.is_float():判断变量类型是否为浮点类 ...

  5. BZOJ4419 SHOI2013发微博（平衡树）

    好友状态的变化次数不会超过m,于是考虑暴力,对每个人记录其好友关系的变化,通过前缀和计算贡献.这需要查询一段前缀时间内某人发的微博数量,可以离线建一棵绝对平衡的平衡树.事实上完全可以线性. #incl ...

  6. Win10间歇性卡顿

    Win10间歇性卡顿 1.关闭不必要的服务:Windows Update.Windows Search.SuperFetch.Background Intelligent Transfer Servi ...

  7. MySQL触发器写法

    触发器创建语法四要素:1.监视地点(table) 2.监视事件(insert/update/delete) 3.触发时间(after/before) 4.触发事件(insert/update/dele ...

  8. 【AtCoder】ARC 081 E - Don't Be a Subsequence

    [题意]给定长度为n(<=2*10^5)的字符串,求最短的字典序最小的非子序列字符串. http://arc081.contest.atcoder.jp/tasks/arc081_c [算法]字 ...

  9. 【NOIP模拟赛】beautiful 乱搞（平衡树）+ST

    biubiu~~~ 我用平衡树处理的这道题,然而这种方法还是要看评测姬..... 正解是乱搞....就是枚举每一位数作为中位数,比他小的看做-1比他大的看做1,那么我们从一开始就有了一个绵延的山,我们 ...

  10. Hadoop NameNode元数据相关文件目录解析

    在<Hadoop NameNode元数据相关文件目录解析>文章中提到NameNode的$dfs.namenode.name.dir/current/文件夹的几个文件: 1 current/ ...