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. 机器学习 (三) 逻辑回归 Logistic Regression

    文章内容均来自斯坦福大学的Andrew Ng教授讲解的Machine Learning课程,本文是针对该课程的个人学习笔记,如有疏漏,请以原课程所讲述内容为准.感谢博主Rachel Zhang 的个人 ...

  2. STL应用——hdu1412（set）

    set函数的应用 超级水题 #include <iostream> #include <cstdio> #include <algorithm> #include ...

  3. Bitcoin-NG

    Bitcoin-NG,一个新的可扩展的区块链协议 Bitcoin-NG仅受限于网络的传输延时,它的带宽仅受限于个人节点的处理能力.通过将比特币的区块链操作分解为两部分来实现这个性能改善:首领选择(le ...

  4. asp.net Forms登录核心方法

    登录核心方法: private void Signin(string curUserId) { System.Web.Security.FormsAuthenticationTicket tk = , ...

  5. 《学习OpenCV》课后习题解答7

    题目:(P105) 创建一个结构,结构中包含一个整数,一个CvPoint和一个 CvRect:称结构体为"my_struct". a. 写两个函数:void Write_my_st ...

  6. 【转】C++ const用法 尽可能使用const

    http://www.cnblogs.com/xudong-bupt/p/3509567.html C++ const 允许指定一个语义约束,编译器会强制实施这个约束,允许程序员告诉编译器某值是保持不 ...

  7. symfony安装总结

    将D:\ApacheServer\php路径添加到环境变量path中,在cmd命令行中可以执行php命令 打开php.ini 打开extension=php_openssl.dll file_put_ ...

  8. win7 C/C++,QT安装环境总结

    1. 安装VMware,但是不能用,发现是权限问题,解决方式:使用管理员运行模式即可: 2. 安装win7 ultimate x64,找了半天找不到密钥,只要用激活软件,目前来说系统可用 3. 安装 ...

  9. API文档打开显示'已取消到该网页的导航'的解决方法

    从网上下载的API,点击目录右边显示框显示“已取消到该网页的导航”.出现这样的问题并不是文档本身的问题,而是文档属性设置的问题. 这时候只要右键文件选择“属性”-在打开的界面中点击“解除锁定”-点击” ...

  10. EF to linq 左连接

    如果连接的数据不存在用 null 表示,则可以左连接查询,但是如果数据类型为 int 则会出错. var ng = (from g in _db.NET_NEWS_GROUP join z in _d ...