默认的滚动条的样式,各个版本的兼容性不是很好, 推荐一款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的应用的更多相关文章

  1. 网站开发常用jQuery插件总结(五)滚动条插件nanoscroller

    网站在展示信息时,如果信息量过大,解决方法主要有三种.1.分页,将信息分页显示.2.整页显示,但是页面过长,影响浏览体验.3.使用滚动条,而默认滚动条样式太单一,用户体验不友好.所以我们需要美化滚动条 ...

  2. 15个带示例的jQuery滚动条插件

    1.NiceScroll:可用于桌面.移动与触摸设备的jQuery滚动插件 NiceScroll是一个jQuery插件(since 1.5),它有着类似于ios/移动设备的样式.它支持Div.iFra ...

  3. Perfect Scrollbar – 完美的 jQuery 滚动条插件

    Perfect Scrollbar 是一个很小的,但完美的 jQuery 滚动插件.滚动条不会影响原来的设计布局,滚动条的设计是完全可定制的.你可以改变几乎所有的 CSS 样式的滚动条,滚动条设计对脚 ...

  4. 11 个最佳 jQuery 滚动条插件

    通过jQuery滚动条插件,你可以换掉千篇一律的默认浏览器滚动条,让你的网站或web项目更具特色,更有吸引力.本文收集了11款非常漂亮.实用的jQuery滚动条插件,你可以轻松将它们应用在自己的网站中 ...

  5. 原创新闻 11 个最佳 jQuery 滚动条插件

    通过jQuery滚动条插件,你可以换掉千篇一律的默认浏览器滚动条,让你的网站或web项目更具特色,更有吸引力.本文收集了11款非常漂亮.实用的jQuery滚动条插件,你可以轻松将它们应用在自己的网站中 ...

  6. jQuery滚动条插件 – jquery.slimscroll.js

    jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动.jquery.slimscroll.js不仅可以定义高度.宽度,还可以定义位置.滚动条大小 ...

  7. jquery 滚动条插件 jquery.nanoscroller.js

    $(".listcontent .nano").nanoScroller();   $(".chatcontent .nano").nanoScroller({ ...

  8. jquery——滚动条插件jscroll.js

    一.效果如下 点击“测试中奖纪录”弹出弹框.弹框中内容超出时显示滚动条. 二.代码部分 1.html结构 <body> <a href="javascript:;" ...

  9. jquery滚动条插件slimScroll

    参数 width: 'auto', //可滚动区域宽度         height: '100%', //可滚动区域高度         size: '10px', //组件宽度         c ...

随机推荐

  1. linux sftp and unix ftp

    sftp 1.功能作用 sftp 是一个交互式文件传输程式.它类似于 ftp, 但它进行加密传输,比FTP有更高的安全性. 2.位置 /usr/bin/sftp 3.格式用法 sftp [-1246C ...

  2. Jmeter性能测试示例

    这次成功做了一个jmeter借口性能测试的简单测试示例,分享一下给大家. jmeter作为一个简单的开源工具,基于java的性能测试工具,使用起来很简单. 也可以作为二次开发,复杂的情形可以自己写代码 ...

  3. hdu 1426(DFS+坑爹的输入输出)

    Sudoku Killer Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  4. http之post方法 提交数据的四种方法

    http协议中,post方法用来向服务端提交数据, 这里介绍四种方式: application/x-www-form-urlencoded multipart/form-data applicatio ...

  5. python版本管理(python环境隔离)

    这将是一篇比较短的文章. 我发文向来注重文章质量,营养不够的宁可不发,但是我相信很多人需要这篇文章. 之所以要去搞清楚这个问题,是我在把 vscode 的 inspector 设置为 pipenv 生 ...

  6. intellij添加jar包

    http://blog.csdn.net/a153375250/article/details/50851049

  7. Linux搭建主从数据库服务器(主从复制)

    配置主机数据库: 1.克隆linux操作系统 2.修改Linux系统主机IP地址 主机IP:192.168.247.150 从机IP:192.168.247.151 3.通过xshell连接Maste ...

  8. Linux下使进程在后台运行

    怎么样使程序在后台执行 ///////////////////  nohup  ./nn > nn.log  2 > &1  &   //////////// 方法有很多, ...

  9. 字典树&01字典树算法笔记

    1]学习了字典树之后,觉得它很明显的就是用空间来换时间,空间复杂度特别大,比如字典数单单存26个小写字母,那么每个节点的孩子节点都有26个孩子节点,字典树中的每一层都保留着不同单词的相同字母. 2]0 ...

  10. poj 3132

    Sum of Different Primes Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 3360   Accepted ...