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

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

　　

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <script src="js/jquery-1.9.1.min.js"></script>
  5.         <script src="js/jquery.nicescroll.min.js"></script>
  6.     </head>
  7.     <body>
  8.         <div id="div1" style="width:100%;height:600px;overflow:auto;">
  9.             <h1>这里是滚动条插件niceScroll的测试页面</h1>
  10.             <h2>这里是滚动条插件niceScroll的测试页面</h2>
  11.             <h3>这里是滚动条插件niceScroll的测试页面</h3>
  12.             <h4>这里是滚动条插件niceScroll的测试页面</h4>
  13.             <h5>这里是滚动条插件niceScroll的测试页面</h5>
  14.             <h6>这里是滚动条插件niceScroll的测试页面</h6>
  15.             <p>这里是滚动条插件niceScroll的测试页面</p>
  16.             <span>这里是滚动条插件niceScroll的测试页面</span>
  17.             <h1>下面是带有滚动条的子div</h1>
  18.             <div  id="div2" style="width:350px;height:200px;overflow:auto;border:1px solid red;">
  19.                 <h1>我是带有滚动条的子div</h1>
  20.                 <h2>我是带有滚动条的子div</h2>
  21.                 <h3>我是带有滚动条的子div</h3>
  22.                 <h4>我是带有滚动条的子div</h4>
  23.                 <h5>我是带有滚动条的子div</h5>
  24.                 <h6>我是带有滚动条的子div</h6>
  25.             </div>
  26.             <h1>这里是滚动条插件niceScroll的测试页面</h1>
  27.             <h2>这里是滚动条插件niceScroll的测试页面</h2>
  28.             <h3>这里是滚动条插件niceScroll的测试页面</h3>
  29.             <h4>这里是滚动条插件niceScroll的测试页面</h4>
  30.             <h5>这里是滚动条插件niceScroll的测试页面</h5>
  31.             <h6>这里是滚动条插件niceScroll的测试页面</h6>
  32.         </div>
  33.     </body>
  34.     <script type"text-javascript">
  35.         $(function(){
  36.             $("#div1").niceScroll({
  37.                 cursorborder:"",
  38.                 cursorcolor:"#00F",
  39.                 boxzoom:false,
  40.                 autohidemode: false
  41.             });
  42.             $("#div2").niceScroll({
  43.                 cursorborder:"",
  44.                 cursorcolor:"#00F",
  45.                 boxzoom:false,
  46.                 autohidemode: false
  47.             });
  48.         });
  49.     </script>
  50. </html>

　　

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

　　

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <script src="js/jquery-1.9.1.min.js"></script>
  5.         <script src="js/jquery.nicescroll.min.js"></script>
  6.     </head>
  7.     <body>
  8.         <div id="div1" style="width:100%;height:600px;overflow:auto;">
  9.             <h1>这里是滚动条插件niceScroll的测试页面</h1>
  10.             <h2>这里是滚动条插件niceScroll的测试页面</h2>
  11.             <h3>这里是滚动条插件niceScroll的测试页面</h3>
  12.             <h4>这里是滚动条插件niceScroll的测试页面</h4>
  13.             <h5>这里是滚动条插件niceScroll的测试页面</h5>
  14.             <h6>这里是滚动条插件niceScroll的测试页面</h6>
  15.             <p>这里是滚动条插件niceScroll的测试页面</p>
  16.             <span>这里是滚动条插件niceScroll的测试页面</span>
  17.             <h1>下面是带有滚动条的子div</h1>
  18.             <div  id="div2" style="width:350px;height:200px;overflow:auto;border:1px solid red;">
  19.                 <div id="warp">
  20.                     <h1>我是带有滚动条的子div</h1>
  21.                     <h2>我是带有滚动条的子div</h2>
  22.                     <h3>我是带有滚动条的子div</h3>
  23.                     <h4>我是带有滚动条的子div</h4>
  24.                     <h5>我是带有滚动条的子div</h5>
  25.                     <h6>我是带有滚动条的子div</h6>
  26.                 </div>
  27.             </div>
  28.             <h1>这里是滚动条插件niceScroll的测试页面</h1>
  29.             <h2>这里是滚动条插件niceScroll的测试页面</h2>
  30.             <h3>这里是滚动条插件niceScroll的测试页面</h3>
  31.             <h4>这里是滚动条插件niceScroll的测试页面</h4>
  32.             <h5>这里是滚动条插件niceScroll的测试页面</h5>
  33.             <h6>这里是滚动条插件niceScroll的测试页面</h6>
  34.         </div>
  35.     </body>
  36.     <script type"text-javascript">
  37.         $(function(){
  38.             $("#div1").niceScroll({
  39.                 cursorborder:"",
  40.                 cursorcolor:"#00F",
  41.                 boxzoom:false,
  42.                 autohidemode: false
  43.             });
  44.             $("#div2").niceScroll('#warp', {
  45.                 cursorborder:"",
  46.                 cursorcolor:"#00F",
  47.                 boxzoom:false,
  48.                 autohidemode: false
  49.             });
  50.         });
  51.     </script>
  52. </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. ORM选型对比

    ORM框架选型 ORM框架选型 jian A YEAR AGO (2017-04-10) orm, database 选型标准:实现O/R mapping,基于promise,支持原生SQL语句,支持 ...

  2. 推荐一个好的Redis GUI 客户端工具

    推荐一个好的Redis GUI 客户端工具 Redis Desktop Manager  

  3. NET 的 ELK 监控方案

    NET 的 ELK 监控方案 https://www.jianshu.com/p/3c26695cfc38 背景就不多说了,谁家没有个几个十系统在跑啊.如何监控这几十个系统的运行状况,对于非运营人员来 ...

  4. 黑群晖DSM 6.1网卡支持列表

    黑群晖DSM 6.1网卡支持列表 Network Drivers====================================AMDamd8111e : AMD 8111 (new PCI ...

  5. [NOI.AC省选模拟赛3.30] Mas的童年 [二进制乱搞]

    题面 传送门 思路 这题其实蛮好想的......就是我考试的时候zz了,一直没有想到标记过的可以不再标记,总复杂度是$O(n)$ 首先我们求个前缀和,那么$ans_i=max(pre[j]+pre[i ...

  6. C&C++——C函数与C++函数相互调用问题

    C C++相互调用 在项目中融合C和C++有时是不可避免的,在调用对方的功能函数的时候,或许会出现这样那样的问题,但只要我的C代码和我的C++代码分别都能成功编译,那其他就不是问题.近来在主程序是C语 ...

  7. fastjson解析服务端返回的数据

    1.配置依赖 //fastjson api 'com.alibaba:fastjson:1.2.44' 2.设计服务端返回的数据 {},{},{}]} 3.编写bean类,特别注意,要和服务端返回的类 ...

  8. python 一些乱七八糟的东西

    import random import os import sys import re class _is: def __init__(self,reg): self.cr=re.compile(r ...

  9. Phantomjs设置浏览器useragent的方式

    Selenium中使用PhantomJS,设置User-Agent的方法. 默认情况下,是没有自动设置User-Agent的:设置PhantomJS的user-agent def __init__(s ...

  10. i=i+1与i+=1的区别及效率（Java）

    原博客地址 在做个java优化的PPT时,看到了i=i+1与i+=1的区别,在这之前还真没想到那么细. 1.x=x+1,x+=1及x++的效率哪个最高?为什么? x=x+1最低,因为它的执行如下. ( ...