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. STL应用——hdu1412（set）

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

  2. 【iOS开发】动态添加子视图 UIView 的正确方法

    很多时候哥比较喜欢用代码添加视图,特别是要同时加很多UIView时,而且跟 xib 比起来代码更容易管理,在多人的项目中代码不容易 conflict. 但小牛哥最近发现很多新人都不太清楚正确的使用方法 ...

  3. jquery在页面加载完成后再append的元素事件无效问题

    最近遇到一个问题,jquery在页面加载完成后再append的元素,append元素上有onclick事件,但是在append的元素上怎么点击都不会触发onclick事件.就如: <ul cla ...

  4. [NOI2017]游戏 2-sat

    ---题面--- 题解: 首先观察到,如果没有x的话,这就是一个2-sat问题. 建图方式:对于限制d1 c1 d2 c2,其中d1, d2分别代表比赛编号,c1, c2代表出场的赛车. 1,如果d1 ...

  5. [Leetcode] Remove duplicates from sorted array 从已排序的数组中删除重复元素

    Given a sorted array, remove the duplicates in place such that each element appear only once and ret ...

  6. 洛谷 P1415 拆分数列 解题报告

    拆分数列 题目背景 [为了响应党中央勤节俭.反铺张的精神,题目背景描述故事部分略去^-^] 题目描述 给出一列数字,需要你添加任意多个逗号将其拆成若干个严格递增的数. 如果有多组解,则输出使得最后一个 ...

  7. BZOJ1875: [SDOI2009]HH去散步 图上边矩乘

    这道题十分的坑…… 我作为一只连矩乘都不太会的渣渣看到这道题就只能神搜了….. 首先说一下普通的矩乘求方案,就是高出邻接矩阵然后一顿快速幂….. 矩乘一般就是一些秘制递推….. 再说一下这道题,我们可 ...

  8. 使用adobe pdf去除PDF文档中的批量雷同文本

    一.问题的提出 MgoSoft tiff to pdf软件没有提供中国地区的非VISA用户的购买渠道,中国通常都是银联标识走天下,卡不是VISA买不了这样的软件, 那么, MgoSoft tiff t ...

  9. hadoop之HDFS与MapReduce

    Hadoop历史 雏形开始于2002年的Apache的Nutch,Nutch是一个开源Java 实现的搜索引擎.它提供了我们运行自己的搜索引擎所需的全部工具.包括全文搜索和Web爬虫. 随后在2003 ...

  10. node安装

    由于Node.js平台是在后端运行JavaScript代码,所以,必须首先在本机安装Node环境. 安装Node.js 目前Node.js的最新版本是7.6.x.首先,从Node.js官网下载对应平台 ...