`
zha_zi
  • 浏览: 598172 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

jquery 滚动条插件nanoScroller 的用法

 
阅读更多

             scroller 插件nanoScroller 用法

          默认滚动条是不是很丑,你可以他进行美化但是兼容性有问题,api是不是不够强大,自己用div做一个滚动条成本太大,这里给你推荐一款jquery 插件nanoscroller ,网上关于nanoscroller 的介绍不太多,github上有代码但是没有demo,使用其实很简单,但是还是稍微介绍一下减少学习的成本,

         引入的类库 jquery.nanoscroller.js

         引入的css库nanoscroller.css

<div id="about" class="nano">
    <div class="nano-content"> ... content here ...  </div>
</div>

 

content 里边放置内容,请注意内层的nano-content 不要丢失,控件内部默认的在这个节点下查询,

$(".nano").nanoScroller({ scroll: 'top' });
$(".nano").nanoScroller({ scroll: 'bottom' });
$(".nano").nanoScroller({ scrollTop: value });
$(".nano").nanoScroller({ scrollBottom: value });
$(".nano").nanoScroller({ scrollTo: $('#a_node') });

 更简单的方式那就直接使用我的示例代码吧

 

 

  • 大小: 92.1 KB
分享到:
评论

相关推荐

    jQuery滚动条插件nanoscroller使用指南

    美化滚动条最简单的方式就是使用jquery插件,本文介绍的就是jquery插件中的滚动条插件nanoscroller. 官方展示,样式可自定义 1.nanoscroller插件功能 对内容实现滚动功能 2.nanoscroller官方地址 ...

    jquery多款滚动条插件插件

    nanoScroller是一款轻量级的jQuery滚动条插件,适用于需要简洁滚动条设计的项目。它提供基本的滚动条功能,但仍然可以进行一定程度的样式定制。nanoScroller特别适合于小屏幕设备,因为它占用的空间非常少。 总结来...

    jQuery仿Mac OS X Lion 系统滚动条插件nanoScroller.js

    jQuery nanoScroller.js插件就是专为此目的设计的,它提供了一种简单的方式来实现与Mac OS X Lion系统类似的滚动条效果。 **一、nanoScroller.js插件的核心特性** 1. **平滑滚动**:nanoScroller.js实现了与Mac OS...

    各种jquery自定义滚动条

    1. **jScrollPane**:jScrollPane是一个广泛使用的jQuery滚动条插件,它提供了一套完整的解决方案,包括垂直和水平滚动条,可自定义的箭头图标,以及平滑滚动效果。通过简单的配置,你可以轻松调整滚动条的宽度、...

    前端项目-jquery.nanoscroller.zip

    2. **初始化插件**:在 JavaScript 中,选择需要应用滚动条的元素,并调用 `.nanoScroller()` 方法。 3. **配置选项**:根据需求,可以传递一个配置对象给 `.nanoScroller()` 方法,以设置滚动条的行为和样式。 4....

    jQuery制作仿Mac Lion OS滚动条效果

    2. jQuery插件使用:文章介绍了如何使用jQuery插件“nanoScrollerJS”来实现Mac OS滚动条效果。通过插件,开发者可以不需要编写大量代码就能实现复杂的界面效果。 3. 插件工作原理:该插件基于最小HTML结构,利用...

    基于jquery的自定义滚动条

    5. **插件使用**:有许多现成的jQuery滚动条插件,如`malihu-custom-scrollbar-plugin`、`nanoScroller`等,它们提供了丰富的配置选项和预设样式,可以快速实现自定义滚动条功能。在项目中,可以根据需求选择合适的...

Global site tag (gtag.js) - Google Analytics