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. 最小生成树（MST）

    原创 今天来说说最小生成树问题,我们知道最小生成树有两种求法,一种是prim算法,另一种是kruskal算法,关于两种算法的定义以及证明,请查看相关资料,这里不多说,理解起来也相当容易,我们来看一个问 ...

  2. 总结const

    int b; const int  *a=&b; int const * a=&b; int * const a =&b; const int *const a=&b; ...

  3. Nginx代理实现跨域

    #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #erro ...

  4. SQL 视图 局部变量 全局变量 条件语句 事务 触发器

    一.视图 1.视图是一张虚拟表,他所存储的不是实际数据,而是查询语句,但我们可以对视图进行像数据表一样的操作. 2.为什么使用视图呢?我的理解是:1.在远程传输数据时,可以避免过长的查询字符,减少流量 ...

  5. c++ map 和 unordered_map的区别

    unordered_map和map类似,都是存储的key-value的值,可以通过key快速索引到value.不同的是unordered_map不会根据key的大小进行排序, 存储时是根据key的ha ...

  6. 11大精选Android自学网站

    无论是从事什么开发,只要是软件行业,不断的更新迭代自己掌握的知识是少不了的.相信干过程序猿的童鞋都清楚,如果要在技术上有所提升,工作之余的不断学习是少不了的.今天小编为大家分享的就是一些比较有用的学习 ...

  7. BZOJ 1040: [ZJOI2008]骑士 | 在基环外向树上DP

    题目: http://www.lydsy.com/JudgeOnline/problem.php?id=1040 题解: 我AC了 是自己写的 超开心 的 考虑断一条边 这样如果根节点不选答案一定正确 ...

  8. Adore 解题报告

    Adore 问题描述 小\(\text{w}\) 偶然间得到了\(1\)个 \(DAG\). 这个 \(DAG\) 有 \(m\) 层,第\(1\)层只有\(1\)个源点,最后\(1\)层只有\(1\ ...

  9. 线程 packaged_task future

    http://www.cnblogs.com/haippy/p/3279565.html #include <iostream> // std::cout #include <fut ...

  10. linux内存条排查

    已发现2个内存错误,应用名称(kernel:),日志内容(hangzhou-jishuan-DDS0248 kernel: sbridge: HANDLING MCE MEMORY ERROR han ...