jquery滚动条插件nanoscroller的应用
默认的滚动条的样式,各个版本的兼容性不是很好, 推荐一款jQuery 插件nanoscroller ,可以自定义滚动条的样式。
应用:
1.引入样式 nanoscroller.css
<link rel="stylesheet" href="nanoscroller.css">
在页面中自定义滚动条的样式

自定义的样式如下图所示:

2.两个js文件,一个jQuery库,一个jquery.nanoscroller.js
<script src="jquery-3.2.1.min.js"></script>
<script src="nanoScroller.js"></script>
页面中必须默认启动滚动js代码:

控件内部默认的在某个节点下查询:如下图所示



3:html 必须有个大的div类名为nano 包裹 小的类名为nano-content的div
<div id="about" class="nano">
<div class="nano-content"> ... content here ... (滚动条的内容部分) </div>
</div>
jquery滚动条插件nanoscroller的应用的更多相关文章
- 网站开发常用jQuery插件总结(五)滚动条插件nanoscroller
网站在展示信息时,如果信息量过大,解决方法主要有三种.1.分页,将信息分页显示.2.整页显示,但是页面过长,影响浏览体验.3.使用滚动条,而默认滚动条样式太单一,用户体验不友好.所以我们需要美化滚动条 ...
- 15个带示例的jQuery滚动条插件
1.NiceScroll:可用于桌面.移动与触摸设备的jQuery滚动插件 NiceScroll是一个jQuery插件(since 1.5),它有着类似于ios/移动设备的样式.它支持Div.iFra ...
- Perfect Scrollbar – 完美的 jQuery 滚动条插件
Perfect Scrollbar 是一个很小的,但完美的 jQuery 滚动插件.滚动条不会影响原来的设计布局,滚动条的设计是完全可定制的.你可以改变几乎所有的 CSS 样式的滚动条,滚动条设计对脚 ...
- 11 个最佳 jQuery 滚动条插件
通过jQuery滚动条插件,你可以换掉千篇一律的默认浏览器滚动条,让你的网站或web项目更具特色,更有吸引力.本文收集了11款非常漂亮.实用的jQuery滚动条插件,你可以轻松将它们应用在自己的网站中 ...
- 原创新闻 11 个最佳 jQuery 滚动条插件
通过jQuery滚动条插件,你可以换掉千篇一律的默认浏览器滚动条,让你的网站或web项目更具特色,更有吸引力.本文收集了11款非常漂亮.实用的jQuery滚动条插件,你可以轻松将它们应用在自己的网站中 ...
- jQuery滚动条插件 – jquery.slimscroll.js
jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动.jquery.slimscroll.js不仅可以定义高度.宽度,还可以定义位置.滚动条大小 ...
- jquery 滚动条插件 jquery.nanoscroller.js
$(".listcontent .nano").nanoScroller(); $(".chatcontent .nano").nanoScroller({ ...
- jquery——滚动条插件jscroll.js
一.效果如下 点击“测试中奖纪录”弹出弹框.弹框中内容超出时显示滚动条. 二.代码部分 1.html结构 <body> <a href="javascript:;" ...
- jquery滚动条插件slimScroll
参数 width: 'auto', //可滚动区域宽度 height: '100%', //可滚动区域高度 size: '10px', //组件宽度 c ...
随机推荐
- GZIP压缩占用CPU大吗?
http://blog.csdn.net/hguisu/article/details/7793038 Filter之——GZIP全站压缩 http://www.cnblogs.com/jbelial ...
- 基础平台为第三方应用接入提供oauth2认证接口
oauth2开放认证协议原理及案例分析 http://blog.csdn.net/volcan1987/article/details/7287605 谈谈基于OAuth 2.0的第三方认证 [上篇] ...
- 关于星号(**/*.java)
关于星号(**/*.java) (1)前面两个星号(**)表示在项目的所有文件夹(包括子文件夹)中的文件:*.java表示以 .java结尾的所有文件. (2)如果前面两个星号(**)没有,只有星号( ...
- 用Lucene.net对数据库建立索引及搜索<转>
用Lucene.net对数据库建立索引及搜索 最近我一直在研究 Lucene.net ,发现Lucene.net对数据库方面建索引的文章在网上很少见,其实它是可以对数据库进行索引的,我闲着没事,写了个 ...
- (2)ansible主机清单文件inventory
1)inventory作用 作用:通常用于定义要管理主机的认证信息,例如ssh登录用户名,密码等相关信息 缺省文件:/etc/ansible/hosts 2)定义主机组方式 #vim /etc/ans ...
- OpenStack 计算服务 Nova计算节点部署 (九)
如果使用vmware虚拟机进行部署,需要开启虚拟化:如果是服务器需要在bios上开启. Nova Compute nova-compute 一般运行在计算节点上,通过Messages Queue接收并 ...
- Kbengine cocos2djs 地图问题
KBEngine.addSpaceGeometryMapping(self.spaceID, None, resPath) 问下这个resPath加载的文件在哪里,后端愣是没找到,前端倒是看到了,还是 ...
- CodeForces 767B The Queue
模拟. 情况有点多,需要仔细.另外感觉题目的$tf$有点不太对......而且数据水了. $0$ $5$ $2$ $2$ $0$ $5$ 这组数据按照题意的话答案可以是$2$和$4$,但是好多错的答案 ...
- Linux基础系列-Day5
网络管理 ifconfig网络管理工具 ifconfig依赖于命令中使用一些选项属性,不仅可以被用来简单地获取网络接口配置信息,还可以修改这些配置,但是通过ifconfig修改的通常为临时配置,即系统 ...
- [Sgu395][bzoj2363]Binary Cat Club
一道神题…… rzO 发现立杰在初三(http://hi.baidu.com/wjbzbmr/item/4a50c7d8a8114911d78ed0a9据此可以推断)就怒A了此题…… Orz /*** ...