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. JavaSE复习（五）网络编程

    客户端:java.net.Socket 类表示.创建Socket对象,向服务端发出连接请求,服务端响应请求,两者建立连接开始通信 服务端:java.net.ServerSocket 类表示.创建Ser ...

  2. [转]学习win10的bash使用ssh连接远程服务器

    1. 前言 微软已经在Win10一周年更新预览版中加入了Ubuntu Bash命令支持,相当于一个小型的linux系统,本来连接远程服务器的话,要使用putty啥的,现在可以用这个直接连接,我来讲讲步 ...

  3. 软工实践 - 第二十九次作业 Beta 冲刺（7/7）

    队名:起床一起肝活队 组长博客:https://www.cnblogs.com/dawnduck/p/10159251.html 作业博客:[班级博客本次作业的链接] (https://edu.cnb ...

  4. Java开发环境配置时的dt.jar与tools.jar是什么（转载）

    你了解dt.jar吗 很多人在初学Java的时候,都要配置环境变量.在配置CLASSPATH的时候,都会加上一个当前目录.,还有两个jar:dt.jar和tools.jar.其实好多人都不了解这两个j ...

  5. 【转】GOOGLE-PROTOBUF与FLATBUFFERS数据的序列化和反序列化

    转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/unity3d-game/1607.html  关于Protobuf 通过本文的转载和分享的相关链接,足够 ...

  6. vue2.0实现页面刷新时某个input获得focus

    通过自定义指令:

  7. KVO 开发详情

    目录 概念 应用KVO的3个步骤 关联属性的KVO 手动管理KVO通知 一.概念 KVO全称是 Key-Value Observing ,是OC的一种消息发送机制.这个机制是指:假设将B对象注册为A对 ...

  8. php数据缓存到文件类设计

    // 自定义缓存类 class Cache_Filesystem { // 缓存写保存 function set ($key, $data, $ttl) { //打开文件为读/写模式 $h = fop ...

  9. 为Ubuntu安装FTP服务

    打开"终端窗口",输入"sudo apt-get update"-->回车-->"输入当前登录用户的管理员密码"-->回车 ...

  10. Foundation框架-NSCalendar

    NSCalendar 日历类 Cocoa中对日期和时间的处理 NSCalendar (一) (2008-11-12 21:54:10) NSCalendar用于处理时间相关问题.比如比较时间前后.计算 ...