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 ...
随机推荐
- graylog安装
官网:http://docs.graylog.org/en/2.4/pages/installation/os/centos.html Prerequisites Taking a minimal s ...
- NOIP模拟2017.6.11解题报告
T1: 水题: 代码: #include <cstdio> #include <iostream> #include <algorithm> using names ...
- 智能社官网顶部导航实现demo
从智能社的blue老师公开课中学习到了很多,在此表示感谢. 这个导航很好玩,于是就想实现一个. html <div id="box"> <ul> <l ...
- CentOS7安装和配置dns服务器
(1)dns介绍 1.基本介绍 名字解析: NetBIOS名:localhost wins hosts FQDN:完全限定域名,www.baidu.com hosts文件: 作用:实现名字解析,主要为 ...
- UVA 548.Tree-fgets()函数读入字符串+二叉树(中序+后序遍历还原二叉树)+DFS or BFS(二叉树路径最小值并且相同路径值叶子节点权值最小)
Tree UVA - 548 题意就是多次读入两个序列,第一个是中序遍历的,第二个是后序遍历的.还原二叉树,然后从根节点走到叶子节点,找路径权值和最小的,如果有相同权值的就找叶子节点权值最小的. 最后 ...
- Codeforces 713A. Sonya and Queries
题目链接:http://codeforces.com/problemset/problem/713/A 题意: Sonya 有一个可放置重复元素的集合 multiset, 初始状态为空, 现给予三种类 ...
- 洛谷——P1680 奇怪的分组
P1680 奇怪的分组 题目背景 终于解出了dm同学的难题,dm同学同意帮v神联络.可dm同学有个习惯,就是联络同学的时候喜欢分组联络,而且分组的方式也很特别,要求第i组的的人数必须大于他指定的个数c ...
- luogu P1353 [USACO08JAN]跑步Running
题目描述 The cows are trying to become better athletes, so Bessie is running on a track for exactly N (1 ...
- HDU 6057 Kanade's convolution(FWT)
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=6057 [题目大意] 有 C[k]=∑_(i&j=k)A[i^j]*B[i|j] 求 Ans ...
- [BZOJ5267]特工
一个套路题...但还是得写一下这个套路避免以后忘了 题目中的运算$f(i,j)=(i|j)\text^i$对单位二进制满足$f(0,0)=f(1,0)=f(1,1)=1,f(0,1)=0$ 先考虑求正 ...