文档章节

jquery-nicescroll 的使用

 大叔做web前端
发布于 2014/04/28 08:51
字数 1003
阅读 1161
收藏 2

Nicescroll is a jquery plugin, for nice scrollbars with a very similar ios/mobile style.

NOW support HORIZONAL scrollbar too!

It supports DIVs, IFrames, textarea, and document page (body) scrollbars. Compatible with all desktop browser: Firefox 4+, Chrome 5+, Safari 4+ (win/mac), Opera 10+, IE 6+. (all A-grade browsers)

Compatible with mobile device: iPad/iPhone/iPod, Android 2.2+, Blackberry phones and Playbook (WebWorks/Table OS), Windows Phone 7.5 Mango.

Compatible with all touch devices: iPad, Window Surface.

Compabible with multi-input device (mouse with touch or pen): Window Surface, Chrome Desktop on touch notebook.

Compatible with 2 directions mice: Apple Magic Mouse, Apple Mouser with 2-dir wheel, PC mouse with 2-dir wheel (if browser support it).

So you have scrollable divs with momentum for iPad 4+ and you have consistent scrollable areas for all desktop and mobile platforms.

Sexy zoom feature, you can "zoom-in" the content of any nicescroll'ed div. Nice to use and nice to see, all the content of the div in fullscreen mode.

It works on desktop (double click on div) either in mobile/touch devices using pinch gesture.

On modern browsers hardware accelerated scrolling has implemented.

Using animationFrame for a smoothest and cpu-saving scrolling. (when browser supports)

Warning for IE6 users (why do you uses IE6 yet? Please updgrade to a more stable and modern browser), some feature can't work for limitation of the browser. Document (body) scrollbars can't appears, old (native browser) one is used. Some issues with IFrame scrolling.

FEATURES

  • simple installation and activation, it works with NO modification of your code. (some exceptions can happen, so you can write to me)

  • very stylish scrollbars, with no occupation on your window (original browser scrollbars need some of page space and reduces window/div usable width)

  • you can style main document scrollbar (body) too!! (not all script implements this feature)

  • on all browsers you can scroll: dragging the cursor, mouse wheel (speed customizable), keyboard navigation (cursor keys, pagup/down keys, home/end keys)

  • scroll is smooth (as modern tablet browsing), speed is customizable

  • zoom feature

  • hardware accelerated scroll (where available)

  • animation frame support for smoth scrolling and cpu-saving

  • dragging scroll mode with scrolling momentum (as touch device)

  • tested for all major browsers desktop and mobile versions

  • support for touch devices

  • support for multi-input devices (IE10 with MSPointer)

  • compatible with many other browsers, including IE6, Safari on Mac and WP7 Mango!

  • very customizable aspect of bar

  • native scroll events are working yet

  • fully integrated with jQuery

  • compatibile with jQuery UI, jQuery Touch, jQuery Mobile

DEPENDENCIES

It's a plugin for the jquery framework, you need to include jquery in your scripts. From 1.5.x version and on. (you can try with 1.4.2+ also)

INSTALLATION

Put loading script tag after jquery script tag and loading the zoom image in the same folder of the script:

<script src="jquery.nicescroll.js">
</script>

Copy image "zoomico.png" in the same folder of jquery.nicescroll.js.

HOW TO USE

Initialize nicescroll ALWAYS in (document) ready statement.

1. Simple mode, it styles document scrollbar:

<script>
$(document).ready(
function() {
$("html").niceScroll();
}
);
</script>

2. Instance with object returned:

<script>
var nice = false; $(document).ready(
function() {
nice = $("html").niceScroll();
}
);
</script>

3. Style a DIV and chage cursor color:

<script>
$(document).ready(
function() {
$("#thisdiv").niceScroll({cursorcolor:"#00F"});
}
);
</script>

4. DIV with "wrapper", formed by two divs, the first is the vieport, the latter is the content:

<script>
$(document).ready(
function() {
$("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});
}
);
</script>

5. Get nicescroll object:

<script>
var nice = $("#mydiv").getNiceScroll();
</script>

6. Hide scrollbars:

<script>
$("#mydiv").getNiceScroll().hide();
</script>

7. Check for scrollbars resize (when content or position have changed):

<script>
$("#mydiv").getNiceScroll().resize();
</script>

CONFIGURATION PARAMETERS

When you call "niceScroll" you can pass some parameters to custom visual aspects:

  • cursorcolor - change cursor color in hex, default is "#000000"

  • cursoropacitymin - change opacity very cursor is inactive (scrollabar "hidden" state), range from 1 to 0, default is 0 (hidden)

  • cursoropacitymax - change opacity very cursor is active (scrollabar "visible" state), range from 1 to 0, default is 1 (full opacity)

  • cursorwidth - cursor width in pixel, default is 5 (you can write "5px" too)

  • cursorborder - css definition for cursor border, default is "1px solid #fff"

  • cursorborderradius - border radius in pixel for cursor, default is "4px"

  • zindex - change z-index for scrollbar div, default value is 9999

  • scrollspeed - scrolling speed, default value is 60

  • mousescrollstep - scrolling speed with mouse wheel, default value is 40 (pixel)

  • touchbehavior - enable cursor-drag scrolling like touch devices in desktop computer, default is false

  • hwacceleration - use hardware accelerated scroll when supported, default is true

  • boxzoom - enable zoom for box content, default is false

  • dblclickzoom - (only when boxzoom=true) zoom activated when double click on box, default is true

  • gesturezoom - (only when boxzoom=true and with touch devices) zoom activated when pinch out/in on box, default is true

  • grabcursorenabled, display "grab" icon for div with touchbehavior = true, default is true

  • autohidemode, how hide the scrollbar works, true=default / "cursor" = only cursor hidden / false = do not hide

  • background, change css for rail background, default is ""

  • iframeautoresize, autoresize iframe on load event (default:true)

  • cursorminheight, set the minimum cursor height in pixel (default:20)

  • preservenativescrolling, you can scroll native scrollable areas with mouse, bubbling mouse wheel event (default:true)

  • railoffset, you can add offset top/left for rail position (default:false)

  • bouncescroll, enable scroll bouncing at the end of content as mobile-like (only hw accell) (default:false)

  • spacebarenabled, enable page down scrolling when space bar has pressed (default:true)

  • railpadding, set padding for rail bar (default:{top:0,right:0,left:0,bottom:0})

  • disableoutline, for chrome browser, disable outline (orange hightlight) when selecting a div with nicescroll (default:true)

  • horizrailenabled, nicescroll can manage horizontal scroll (default:true)

  • railalign, alignment of vertical rail (defaul:"right")

  • railvalign, alignment of horizontal rail (defaul:"bottom")

  • enabletranslate3d, nicescroll can use css translate to scroll content (default:true)

  • enablemousewheel, nicescroll can manage mouse wheel events (default:true)

  • enablekeyboard, nicescroll can manage keyboard events (default:true)

  • smoothscroll, scroll with ease movement (default:true)

  • sensitiverail, click on rail make a scroll (default:true)

本文转载自:http://code.google.com/p/jquery-nicescroll/

粉丝 2
博文 7
码字总数 2720
作品 0
西安
私信 提问
加载中

评论(1)

大叔做web前端 博主
使用项目但是采用动态菜单,滚动条在菜单上显示,当菜单关闭后滚动条还在,原因是没有使用$("#mydiv").getNiceScroll().hide()。后增加 hide()和show()发现滚动条不动最后在show()前增加resize就ok了
Nicescroll滚动条插件的用法

Nicescroll滚动条插件是一个非常强大的基于JQUERY的滚动条插件,不需要增加额外的css,几乎全浏览器兼容。ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,可在触...

yxm2016
2017/10/26
37
0
19个带示例的jQuery滚动条插件

1、NiceScroll:可用于桌面、移动与触摸设备的jQuery滚动插件 NiceScroll是一个jQuery插件(since 1.5),它有着类似于ios/移动设备的样式。它支持Div、iFrame、一个body的滚动条效果。适用于...

彭博
2012/11/27
2.1K
0
19个带示例的jQuery滚动条插件

1、NiceScroll:可用于桌面、移动与触摸设备的jQuery滚动插件 NiceScroll是一个jQuery插件(since 1.5),它有着类似于ios/移动设备的样式。它支持Div、iFrame、一个body的滚动条效果。适用于...

彭博
2012/07/25
51.6K
14
dom对象和jQuery对象的区别

1.jQuery对象和DOM对象 在第一次学习Jquery的时候也许大家都不是很清楚Jquery对象和DOM对象两者之间的关系,下面就解释两点,便于对Jquery和Dom加深理解 DOM对象,即是我们用传统的方法(java...

DockOne
2014/07/30
110
0
JS对象与Dom对象与jQuery对象之间的区别

前言 通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 分析: 其实因为$("#save")出来的其实是jQuery对象,而不是普通DOM对象 解......

苦水润喉
2018/08/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Knowage 6.2安装部署

注意:需要正确配置JAVA_HOME和JRE_HOME还有catalina_home,否则启动的时候tomcat一闪而过,想要获得报错信息,可以打开cmd,在dos命令行运行开始命令 官网:https://www.knowage-suite.com/s...

阿伦哥-
26分钟前
5
0
c++11 左值引用和右值引用

#include <iostream>using namespace std;void Print(string& s){ cout << s;}int main(){ string s="abc"; Print(s); // OK Print("abc"); // parse error......

SibylY
28分钟前
5
0
浅谈Facade外观模式

一、前言 外观模式是一种非常简单的模式,简单到我们经常都会使用,比如对于类A和B,如果两者需要交互,经过一定的处理过程才能实现某一个具体的功能,那么我们可以将这个处理的过程定义为一...

青衣霓裳
29分钟前
5
0
AnalyticDB for PostgreSQL 6.0 新特性介绍

阿里云 AnalyticDB for PostgreSQL 为采用MPP架构的分布式集群数据库,完备支持SQL 2003,部分兼容Oracle语法,支持PL/SQL存储过程,触发器,支持标准数据库事务ACID。ADB PG通过行存储、列存...

Mr_zebra
31分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部