默认的滚动条的样式,各个版本的兼容性不是很好, 推荐一款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. 设置Eclipse/MyEclipse中编辑界面点击任何文件后Package Explorer导航自动定位该文件

    原文:http://www.myexception.cn/eclipse/425836.html 设置步骤: 导航Package Explorer的右上角有一个黄色双向箭头图标,鼠标移动到上面提示“L ...

  2. BlockingQueue drainTo()

    BlockingQueue BlockingQueue的核心方法:放入数据: offer(anObject):表示如果可能的话,将anObject加到BlockingQueue里,即如果Blockin ...

  3. Jump Game I&&II——入门级贪心算法

    Jump Game I Given an array of non-negative integers, you are initially positioned at the first index ...

  4. WordPress函数query_posts用法汇总

    最近经常有网友跟我咨询WordPress函数query_posts的相关用法,说起来query_posts实在是太强大,参数无数,用法更是无数,如果让我说它的用法,我根本没法一一说清楚.开始之前,你可 ...

  5. 说说WordPress的主查询函数-query_posts()

    今天说说WordPress 的主查询函数 -query_posts(),因为我正在制作的主题里面多次用到了这个函数 . query_posts()查询函数决定了哪些文章出现在WordPress 主 循 ...

  6. umount.nfs: device is busy解决办法

    fuser -km /app/nfs/ https://blog.csdn.net/x_i_y_u_e/article/details/42914817

  7. netcore 配置文件使用

    一直在记录整理接口调用,但是最近发现关于项目在vs中本地启动也有许多方便的地方. 首先由于使用的是Java的Eureka和网关来做的服务基础, 然后服务就涉及到注册一说, 问题是,如果appsetti ...

  8. shadownsocks SSR 账号密码注册 可1元体验一天

    shadownsocks SSR 账号密码注册 可1元体验一天 注册地址 https://www.cup123.club/register?aff=809

  9. vue小荔枝,时间控件,动态按月份增减。

    依赖框架有jq,bootstrap3.0,vue2.0; 自封装(搬运)时间控件,bootstrap-datetimepicker.资源下载:看这里 需求: 默认本地时间,相隔一个月 四个选项:1一个 ...

  10. python模式匹配,提取指定字段

    re匹配时分多行模式(re.M)与单行模式(rs.S),多行模式是每一行单独匹配,单行模式是把所有的行当成一行来匹配. 单行模式下.可以匹配换行符. ^$匹配所有字符 import re s='1_2 ...