默认的滚动条的样式,各个版本的兼容性不是很好, 推荐一款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 之Copy List with Random Pointer(23)

    深拷贝一个链表,不同的是这个链表有个额外的随机指针.参考:http://blog.csdn.net/ljiabin/article/details/39054999 做法非常的巧妙,分成三步,一是新建 ...

  2. 【笔试题】Java 易错题精选

    笔试题 Java 易错题精选 1.写出下列程序的运行结果( )String 不变性Java 值传递 public class Test { public static void main(String ...

  3. bss、data、text、heap(堆)与stack(栈)

    bss段: bss段(bss segment)通常是指用来存放程序中未初始化的全局变量和静态变量(static)的一块内存区域. bss是英文Block Started by Symbol的简称. b ...

  4. [onethink ucenter] 跨域名单点登录关键点

    1.uc_client/data/cache/apps.php <?php $_CACHE['apps'] = array ( 1 => array ( 'appid' => '1' ...

  5. PAT L3-002. 堆栈

    树状数组,二分. 一堆数字,可以删除栈顶,压入数字,求中位数,可以线段树,也可以树状数组上二分. #include<map> #include<set> #include< ...

  6. sqlldr load UTF8 error

    The default length semantics for all datafiles (except UFT-16) is byte. So in your case you have a C ...

  7. Beaglebone Black教程Beaglebone Black的引脚分配

    Beaglebone Black教程Beaglebone Black的引脚分配 Beaglebone Black的引脚分配 绝大多数的微型开发平台都提供了一些称为GPIO的输入输出端口.这些端口可以让 ...

  8. 【BZOJ 1049】 1049: [HAOI2006]数字序列 (LIS+动态规划)

    1049: [HAOI2006]数字序列 Description 现在我们有一个长度为n的整数序列A.但是它太不好看了,于是我们希望把它变成一个单调严格上升的序列.但是不希望改变过多的数,也不希望改变 ...

  9. 对有些反编译不成功的apk,请更新最新的apktool.jar、 dex2jar试试

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 对有些反编译不成功的apk,请更新最新的apktool.jar. dex2jar试试 a ...

  10. [BZOJ2458][BeiJing2011]最小三角形(分治)

    求平面上n个点组成的周长最小的三角形. 回忆平面最近点对的做法,找到横坐标的中点mid分治到两边,合并时考虑离mid横坐标不超过当前最小值d的所有点,按y排序后暴力更新答案. 这个题也一样,先分治到两 ...