jQuery滚动条插件nanoscroller使用指南

网站在展示信息时，如果信息量过大，解决方法主要有三种。1.分页，将信息分页显示。2.整页显示，但是页面过长，影响浏览体验。3.使用滚动条，而默认滚动条样式太单一，用户体验不友好。所以我们需要美化滚动条。

美化滚动条最简单的方式就是使用jquery插件，本文介绍的就是jquery插件中的滚动条插件nanoscroller.

官方展示,样式可自定义

1.nanoscroller插件功能

对内容实现滚动功能

2.nanoscroller官方地址

http://jamesflorentino.github.io/nanoScrollerJS/

3.nanoscroller使用方法

1.引用文件

<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.nanoscroller.js"></script>
<link rel="stylesheet" href="nanoscroller.css">

2.定义滚动条样式

.nano { background: #bba; width: 500px; height: 500px; font-size:12px;font-family:微软雅黑;border-radius:8px; }
.nano .content {
  padding: 20px;
}
.nano .pane {
  background: #555;
  width: 8px;
  right: 1px;
 margin: 5px;
}
.nano .slider {
  background: #111;
}

3.滚动显示的内容

<div id="about" class="nano">
 <div class="content">
   滚动显示的内容
  </div>
</div>

以上所述就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • jQuery leonaScroll 1.1 自定义滚动条插件(推荐)

    leonaScroll-1.1最新版 leonaScroll-1.1.js 欢迎使用leonaScroll-1.1.js,如您在使用过程中发现更多问题,欢迎指正! 更新:1.1版本 1.修复了前面初始版本中的一些bug,比如不能自适应用户的文本内容,css文件繁杂 2.用户只需调用一个方法即可使用该插件,无需按照原来的class类名去添加和定义你的滚动条文本域及外层元素,显得更为自由 3.增设了滚动条宽度.上下微调按钮高度,滚动文本区域的设置 4.增设了文本内容未超出时是否显示滚动条可选设置选项

  • jQuery中Nicescroll滚动条插件的用法

    本篇文章主要介绍了jQuery中Nicescroll滚动条插件的用法,Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件,有需要的可以了解下. Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件,不需要增加额外的css,几乎全浏览器兼容.ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,可在触摸屏上使用. Nicescroll官网地址:http://www.areaaperta.com/nicescroll/ 引入核心文件

  • 学习使用jquery iScroll.js移动端滚动条插件

    大家在日常工作中最常用的插件是什么,jQurey?Lazyload?但是这些都是在PC端,但是在移动端最常用的插件莫过于iScroll了,iScroll到底是什么东西,应该怎么用?iScroll是个很强大的插件,我也只是略懂皮毛,这里我们简单的介绍一下. iScroll的产生: iScroll的产生完全是因为移动版webkit浏览器,例如在iPhone,Android 的移动设备上. iScroll的使用方法: iScroll的原理是外层有一个溢出隐藏(overflow:hidden;)的DOM

  • jquery滚动条插件（可以自定义）

    以后用起来就方便了把 css文件引入 <link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css"> js引入 <script type="text/javascript" src="js/jquery.mCustomScrollbar.concat.min.js"></script&

  • jquery滚动条插件jScrollPane的使用介绍

    这是一个js的页面滚动条插件 使用时引入三个文件:(路径自行填写) 复制代码 代码如下: <link type="text/css" href="路径/jquery.jscrollpane.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="路径/jquery.mousewheel.js

  • jquery自定义滚动条插件示例分享

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • jQuery滚动条插件nanoscroller使用指南

    jQuery滚动条插件nanoscroller使用指南

    网站在展示信息时,如果信息量过大,解决方法主要有三种.1.分页,将信息分页显示.2.整页显示,但是页面过长,影响浏览体验.3.使用滚动条,而默认滚动条样式太单一,用户体验不友好.所以我们需要美化滚动条. 美化滚动条最简单的方式就是使用jquery插件,本文介绍的就是jquery插件中的滚动条插件nanoscroller. 官方展示,样式可自定义 1.nanoscroller插件功能 对内容实现滚动功能 2.nanoscroller官方地址 http://jamesflorentino.githu

  • jquery滚动条插件slimScroll使用方法

    本文实例为大家总结了滚动条插件slimScroll的使用方法,供大家参考,具体内容如下 simScroll插件项目下载地址:https://github.com/rochal/jQuery-slimScroll TIP: 1.slimScroll在使用的时候要依赖JQ,所以首次使用的时候要引入JQ再引入simScroll插件 2.不支持resize的时候重新调用插件,不过有人已经修改过源码,这是修改过的版本的下载地址:https://github.com/kujian/jQuery-slimSc

  • jQuery验证插件validation使用指南

    在网站开发过程中,有时我们需要验证用户输入的信息是否符合我们的要求,所以我们会对用户提交的数据进行验证.验证分两次进行,一次是在客户端,一次是在服务端.客户端的验证可以提升用户的体验. jquery验证插件有很多,实现的功能也基本相同.本文介绍的只是jquery验证插件中的一种jquery.validate jquery.Validation是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性. 1.jquery.validate插件功能 简单

  • jQuery背景插件backstretch使用指南

    一.backstretch插件功能 优化网站外观.主要用于设置页面背景图片,也可以设置html元素的背景图片.背景图片可以设置多张,在间隔时间内循环显示. 注 但是在设置背景图片时,如果图片过大,网站使用的资源又受到限制时,应压缩图片的大小.不然图片的加载会非常缓慢.我测试了官方网站的demo,图片都比较大,有的图片在400kb以上,在虚拟空间中打开网站,图片加载有点慢. 插件demo的截图效果不明显,所以不在本文贴出,大家可以去官方看demo演示,或在本文的下面,也有我测试这个插件的用例,可以

  • jQuery提示插件alertify使用指南

    jQuery提示插件alertify使用指南

    1.alertify插件功能 主要实现提示功能,用于代替js中的alert,confirm,prompt,显示友好的提示框 2.alertify使用方法 1.使用的文件 主要使用三个文件,两个css(alertify.core.css,alertify.default.css),用于设置提示框的样式.一个js(alertify.min.js或alertify.js),用于实现提示框的功能. 2.实现提示框代码 alertify使用非常简单,主要步骤为:初始化(初始化alertify)->绑定(绑

  • jQuery菜单插件superfish使用指南

    下载地址:http://plugins.jquery.com/project/Superfish 文档说明:http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started Superfish的一些特点及效果: 使用纯Css实现动态效果,跨浏览器,支持最烂浏览器IE6 可设置下拉菜单在鼠标离开时自动隐藏时间.默认是800毫秒 支持淡入淡出动画 支持键盘响应 对含有子菜单的母菜单自动加入提示箭头 支持阴影效果,但需要有好的浏览器支

随机推荐