jquery niceScroll（插件）滚动条错位问题和ztree插件的使用

1.在做项目时，由于页面风格不能使用默认的滚动条，所以找到了niceScroll这个滚动条插件
2.要使用滚动条和ztree插件，我们必须先引入插件的js文件，这里要注意的是niceScroll插件是基于jQuery的，所以我们必须在引入滚动条插件之前先引入jQuery的js文件。引入之后我们便可以使用滚动条了。

<script src="dist/js/lib/jquery/jquery-3.3.1.min.js"></script><script src="dist/js/lib/nicescroll/jquery.nicescroll.min.js"></script><script src="dist/js/lib/ztree/js/jquery.ztree.all.js"></script><script src="dist/js/lib/ztree/js/jquery.ztree.core.min.js"></script><script src="dist/js/lib/ztree/js/jquery.ztree.excheck.min.js"></script>

在项目中要实现父子div都带有滚动条，如果只是简单的对div的滚动条进行初始化的话，就会导致子div的滚动条错位，例如

<body><div id="div1" style="width:100%;height:600px;overflow:auto;"><h1>这里是滚动条插件niceScroll的测试页面</h1><h2>这里是滚动条插件niceScroll的测试页面</h2><h3>这里是滚动条插件niceScroll的测试页面</h3><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></div></body>

<script type"text-javascript">$(function(){$("#div1").niceScroll({cursorwidth: "5px",cursorborderradius: "5px",cursorcolor: "RGB(69, 255, 248)",});$("#div2").niceScroll({cursorwidth: "5px",cursorborderradius: "5px",cursorcolor: "RGB(69, 255, 248)",});});</script>

这样写会出现子div滚动条错位的问题，发现是因为滚动条的定位是根据body进行绝对定位，为了解决这个问题使用另一种方法来初始化子div的滚动条，可以导致子div的滚动条不会错位：

<body><div id="div1" style="width:100%;height:600px;overflow:auto;"><h1>这里是滚动条插件niceScroll的测试页面</h1><h2>这里是滚动条插件niceScroll的测试页面</h2><h3>这里是滚动条插件niceScroll的测试页面</h3><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></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>

在我做项目的时候出现了这个问题，在此记录一下。

jquery niceScroll（插件）滚动条错位问题和ztree插件的使用相关推荐

jquery.nicescroll完美滚动条使用方法
jquery.nicescroll完美滚动条使用方法(转) 配置参数 : 当调用"niceScroll"你可以传递一些参数来定制视觉方面: cursorcolor - 十六进制改变 ...
滚动条插件---jquery.nicescroll.js
nicescroll 滚动条插件是一个非常强大的基于 jQuery 的滚动条插件,不需要增加额外的css,几乎全浏览器兼容.ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件, ...
jquery.nicescroll.js 美化滚动条
1. 引用jquery.js和jquery.nicescroll.js <script type="text/javascript" src="js/jquery. ...
oracle 生成目录树,jQuery zTree插件快速实现目录树
ztree是JQuery的一个开源树形目录的插件,用来快速构建网站的树形目录结构,并且提供了功能丰富,利于扩展的API. JQuery ztree官网只要引入jquery和ztree的库js,然后给 ...
j2ee 简单网站搭建：（十）jquery ztree 插件使用入门
为什么80%的码农都做不了架构师?>>> <j2ee 简单网站搭建:(一) windows 操作系统下使用 eclipse 建立 maven web 项目> < ...
树状图JQuery.ztree插件的使用
一. 树状图,顾名思义就是树形状的图,想必大家对它也不陌生,而且天天都在用的.就比如文件资源管理器里面左侧功能,它就是一个树状图,使用树状图可以很方便快捷地找到所需要的文件,而且对于文件的管理也是非常 ...
jquery ztree插件使用
官网:ztree.me,下载插件在页面中引入ztree相关的文件: <link rel="stylesheet" href="../../../css/zTree ...
jQuery.NiceScroll - 有史以来最好的 nicescroll 版本——在现代浏览器和移动设备上极其流畅和一致，资源使用率低(中文文档)
jQuery.NiceScroll 特征依赖关系使用配置参数有史以来最好的 nicescroll 版本--在现代浏览器和移动设备上极其流畅和一致,资源使用率低官网:nicescroll.ar ...
ztree插件的使用
在bootstrap中使用ztree插件做树形架构,由于觉得原始的树形不够美观,所以改了其中的css插件 demo演示,以及各种属性的用法网站: http://www.treejs.cn/v3/de ...

jquery niceScroll（插件）滚动条错位问题和ztree插件的使用

jquery niceScroll（插件）滚动条错位问题和ztree插件的使用相关推荐

最新文章

热门文章