默认的滚动条的样式,各个版本的兼容性不是很好, 推荐一款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. GZIP压缩占用CPU大吗?

    http://blog.csdn.net/hguisu/article/details/7793038 Filter之——GZIP全站压缩 http://www.cnblogs.com/jbelial ...

  2. 基础平台为第三方应用接入提供oauth2认证接口

    oauth2开放认证协议原理及案例分析 http://blog.csdn.net/volcan1987/article/details/7287605 谈谈基于OAuth 2.0的第三方认证 [上篇] ...

  3. 关于星号(**/*.java)

    关于星号(**/*.java) (1)前面两个星号(**)表示在项目的所有文件夹(包括子文件夹)中的文件:*.java表示以 .java结尾的所有文件. (2)如果前面两个星号(**)没有,只有星号( ...

  4. 用Lucene.net对数据库建立索引及搜索<转>

    用Lucene.net对数据库建立索引及搜索 最近我一直在研究 Lucene.net ,发现Lucene.net对数据库方面建索引的文章在网上很少见,其实它是可以对数据库进行索引的,我闲着没事,写了个 ...

  5. (2)ansible主机清单文件inventory

    1)inventory作用 作用:通常用于定义要管理主机的认证信息,例如ssh登录用户名,密码等相关信息 缺省文件:/etc/ansible/hosts 2)定义主机组方式 #vim /etc/ans ...

  6. OpenStack 计算服务 Nova计算节点部署 (九)

    如果使用vmware虚拟机进行部署,需要开启虚拟化:如果是服务器需要在bios上开启. Nova Compute nova-compute 一般运行在计算节点上,通过Messages Queue接收并 ...

  7. Kbengine cocos2djs 地图问题

    KBEngine.addSpaceGeometryMapping(self.spaceID, None, resPath) 问下这个resPath加载的文件在哪里,后端愣是没找到,前端倒是看到了,还是 ...

  8. CodeForces 767B The Queue

    模拟. 情况有点多,需要仔细.另外感觉题目的$tf$有点不太对......而且数据水了. $0$ $5$ $2$ $2$ $0$ $5$ 这组数据按照题意的话答案可以是$2$和$4$,但是好多错的答案 ...

  9. Linux基础系列-Day5

    网络管理 ifconfig网络管理工具 ifconfig依赖于命令中使用一些选项属性,不仅可以被用来简单地获取网络接口配置信息,还可以修改这些配置,但是通过ifconfig修改的通常为临时配置,即系统 ...

  10. [Sgu395][bzoj2363]Binary Cat Club

    一道神题…… rzO 发现立杰在初三(http://hi.baidu.com/wjbzbmr/item/4a50c7d8a8114911d78ed0a9据此可以推断)就怒A了此题…… Orz /*** ...