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 ...
随机推荐
- 动态计算文本的CGSize
// 计算文本的size -(CGSize)sizeWithText:(NSString *)text maxSize:(CGSize)maxSize fontSize:(CGFloat)fontSi ...
- XML、java解释XML、XML约束
1.XML有什么用? (1)可以用来保存数据 (2)可以用来做配置文件 (3)数据传输载体 2.XML格式 XML 元素必须遵循以下命名规则: 名称可以含字母.数字以及其他的字符 名称不能以数字或者标 ...
- liunx命令大全
Linux常用命令大全 Linux常用命令大全(非常全!!!) 最近都在和Linux打交道,感觉还不错.我觉得Linux相比windows比较麻烦的就是很多东西都要用命令来控制,当然,这也是很多人 ...
- window.screen.height和window.screen.availHeight和document.body.clientHeight和document.documentElement.clientHeight
说这几个属性前 我说一下我的设备 我的设备有两个,一个高度为1080的显示器,一个高度为800的电脑 第一种:window.screen.height 这个方法是获取用户电脑屏幕的高度,是不关浏览器或 ...
- [].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) })
问问你自己,看得懂这行代码吗?要是看不懂就点击进来看看吧,要是看的懂得话,可以绕路 1.call:call(thisObj,arg1,arg2,arg3) [].forEach.call($$(&qu ...
- rabbitmq在centos7下安装
知识预览 一. RabbitMQ队列 二. 事例 三.基于RabbitMQ的RPC 回到顶部 一. RabbitMQ队列 ? 1 2 3 4 5 #消息中间件 -消息队列 - 异步 提交的任务不需 ...
- python 单例模式4中实现方法
python实现单例模式的方法: 1. 使用模块 python的模块在第一次导入时会生成.pyc文件,当第二次导入时就会直接加载.pyc文件,而不会再次执行模块代码. 只需将其单独放在一个模块里,并创 ...
- 访问Github慢的解决办法
http://blog.csdn.net/sunsteam/article/details/63253933 http://tool.chinaz.com/dns 151.101.196.249 g ...
- angularjs 微信授权登录 微信支付
最近做一个项目,用angular 一个单页应用,打算打包成 跨平台移动App 以及在微信里面使用.给大家一个案例 首先,熟悉一下微信授权部分的源代码,如下所示: javascript 前端代码: va ...
- Notepad++7.4.2的配置使用详情
之前有写过一篇notepad的使用说明,没想到稀里糊涂更新了几次之后,我以前的配置什么的全干掉了,而且我打开新版后,发现和以前还有点不一样了.那就继续这个高级版本再来一边吧. 1.Zen Coding ...