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 ...
随机推荐
- APP运营
产品相关术语 APP:application的简写,即应用. 开发商:也叫CP,即ContentProvider内容提供商. 发行商(运营商):代理CP开发出来的产品. 联运:CP和渠道联合运营产品. ...
- java中的Map集合
Map接口 Map为一个接口.实现Map接口的类都有一个特点:有键值对,将键映射到值的对象. Map不能包含重复的键,每个键可以映射到最多一个值. Map常见的接口方法有: V put(K key, ...
- go run/ go install/ go build / go get的区别
go run 运行当个.go文件 go install 在编译源代码之后还安装到指定的目录 go build 加上可编译的go源文件可以得到一个可执行文件 go get = git clone + g ...
- LeetCode解题报告—— Search in Rotated Sorted Array & Search for a Range & Valid Sudoku
1. Search in Rotated Sorted Array Suppose an array sorted in ascending order is rotated(轮流,循环) at so ...
- window下线程同步之(Critical Sections(关键代码段、关键区域、临界区域)
关键区域(CriticalSection) 临界区是为了确保同一个代码片段在同一时间只能被一个线程访问,与原子锁不同的是临界区是多条指令的锁定,而原子锁仅仅对单条操作指令有效;临界区和原子锁只能控制同 ...
- hdu 5116 计数
题目大意:给你n个点, n个点的坐标都在200以内,让你统计不相交的两个L形的种数,且L形的两条边长的gcd = 1. 思路:用二维树状数组维护点的信息,然后划分区块进行统计,题解是用总的减去相交的, ...
- OpenStack 认证服务 KeyStone部署 (四)
Keystone作用: 用户与认证:用户权限与用户行为跟踪: 服务目录:提供一个服务目录,包括所有服务项和相关Api的断点 SOA相关知识 Keystone主要两大功能用户认证和服务目录(相当于一个注 ...
- redux saga学习
来源地址:https://www.youtube.com/watch?v=o3A9EvMspig Saga的基本写法 takeEvery与takeLatest的区别 takeEvery是指响应每一个请 ...
- 590. N叉树的后序遍历
给定一个 N 叉树,返回其节点值的后序遍历. 例如,给定一个 3叉树 : 返回其后序遍历: [5,6,3,2,4,1]. 说明: 递归法很简单,你可以使用迭代法完成此题吗? /* // Definit ...
- Spring中的设计模式2
Spring设计模式分析 工厂模式和单态模式 工厂模式:可以将java对象对象的调用者从被调用者的实现逻辑中分离.调用者只关心被调用者必须满足的某种规则,这种规则我们看做是接口,不必关心实例的具体 ...