默认的滚动条的样式,各个版本的兼容性不是很好, 推荐一款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. leetcode 之Valid Palindrome(26)

    现在开始进入字符串系列. 判断回文串的.首尾各定义一个指针,然后相比较.难点在于如何提出非字母数字的字符. bool isValidPalind(string s) { //转为小写,注意这个函数的用 ...

  2. Idea创建模板

    新建文件模板 /** * * @author zenglw * @date ${DATE} */ Mapper #if (${PACKAGE_NAME} && ${PACKAGE_NA ...

  3. 何時需要重启 OFBiz

    你在做如下更改時需要重新启動OFBiz服務器: - Java文件(記得要重新編譯) - 配置/.properties文件 - entitymodel或entitygroup XML定義文件 - 服務或 ...

  4. AC日记——[SDOI2017]树点涂色 bzoj 4817

    4817 思路: 跪烂大佬 代码: #include <bits/stdc++.h> using namespace std; #define maxn 500005 struct Tre ...

  5. 通过javascript进行UTF-8编码

    通过javascript进行UTF-8编码 javascript的字符集: javascript程序是使用Unicode字符集编写的.Unicode是ASCII和Latin-1的超集,并支持地球上几乎 ...

  6. 关于在windows下部署发布QT程序的总结

    原文请看:http://www.cnblogs.com/javaexam2/archive/2011/05/18/2632916.html 关于在windows下部署发布QT程序的总结 2008-06 ...

  7. centos 新增用户, 然后他在主目录添加网站403Forbbiden

    是 /home/zhou  这个文件夹的权限不够 往往看了网站目录并且给了777权限了,还是403,就是因为父目录的权限不够

  8. RecyclerView混合布局

    本来想把公司的UI图放上来,考虑到版权等未知因素,就拿网上的图来说了: 类似的这种布局,有的一行只有一张图片,有的一行有两个元素,有个一行有三个元素..就是混合的布局方式 参考文献: https:// ...

  9. 【Go】语法基础之结构体

    结构体的定义很简单: type Vertex struct { X, Y float64 } 可以理解为多个变量的集合. 结构体的使用: 1.直接使用: v := Vertex{1, 2} 或 var ...

  10. http://download.eclipse.org/technology/m2e/releases install error

    Can you try running Eclipse as Admin and try this again?. Let me know how that goes. what is the upd ...