45.nice-scroll 中文文档教程

Question

45.NiceScroll

v. 0.0.1

The best nicescroll release ever - extremely smooth and consistent in modern browsers and mobile devices, with low resource usage

• 网站：nicescroll.areaaperta.com

• 回购：github.com/4nkit-5hukla/45.nicescroll

• 推特：@nicescroll

  

Nicescroll 作为 Greasemonkey 插件：http://userscripts .org/scripts/show/119910（冻结）

Nicescroll 是一个 jquery 插件，用于具有非常相似的 ios/mobile 风格的漂亮滚动条。

• HORIZONAL scrollbar support!
• It supports DIVs, IFrames, textarea, and document page (body) scrollbars.
• Compatible with all recent desktop browser and older: Chrome, Firefox, Edge, IE8+, Safari (win/mac), Opera. (all A-grade browsers)
• Compatible with mobile device: iPad/iPhone/iPod, Android 4+, Blackberry phones and Playbook (WebWorks/Table OS), Windows Phone 8 and 10.
• Compatible with all touch devices: iPad, Android tablets, 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).

因此，您拥有适用于 iPad 的可定制和可滚动的 div，并且您拥有适用于所有桌面和移动平台的一致的可滚动区域。

性感的缩放功能，您可以“放大”任何 nicescroll'ed div 的内容。 很好用，很高兴看到，全屏模式下 div 的所有内容。 它可以在桌面（双击 div）上工作，也可以在移动/触摸设备上使用捏合手势。

在现代浏览器上，硬件加速滚动已经实现。 使用 animationFrame 实现最流畅且节省 CPU 的滚动。 （当浏览器支持时）

“使用严格”测试脚本以获得最高代码质量。 Bower 和 AMD 准备好了。

警告 IE6/7 用户（你为什么还用？请升级到更稳定和现代的浏览器），对你的浏览器的支持已被弃用。

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 device/browser support 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 (MSPointer/Pointer support)
• compatible with many other browsers and webkit derivated!
• scrollbar has a lot a customizable features
• native scroll events are working yet
• fully integrated with jQuery
• compatibile with jQuery UI, jQuery Touch, jQuery Mobile

DEPENDENCIES

它是 jquery 框架的插件，您需要在脚本中包含 jquery。 它适用于 jQuery 1.x / 2.x / 3.x 分支（slim 版本不起作用）

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

当您使用缩放功能时，将图像“zoomico.png”复制到与 45.nicescroll.js 相同的文件夹中。

• HOW TO USE

始终在（文档）就绪语句中初始化 nicescroll。

// 1. Simple mode, it styles document scrollbar:
$(function() {  
    $("body").niceScroll();
});

// 2. Instance with object returned:
var nice = false;
$(function() {  
    nice = $("body").niceScroll();
});

// 3. Style a DIV and change cursor color:
$(function() {  
    $("#thisdiv").niceScroll({cursorcolor:"#00F"});
});

// 4. DIV with "wrapper", formed by two divs, the first is the vieport, the latter is the content:
$(function() {
    $("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});
});

// 5. Get nicescroll object:
var nice = $("#mydiv").getNiceScroll();

// 6. Hide scrollbars:
$("#mydiv").getNiceScroll().hide();

// 7. Check for scrollbars resize (when content or position have changed):
$("#mydiv").getNiceScroll().resize();

// 8. Scrolling to a position:
$("#mydiv").getNiceScroll(0).doScrollLeft(x, duration); // Scroll X Axis
$("#mydiv").getNiceScroll(0).doScrollTop(y, duration); // Scroll Y Axis

CONFIGURATION PARAMETERS

当您调用“niceScroll”时，您可以将一些参数传递给自定义视觉方面：

$("#thisdiv").niceScroll({
    cursorcolor: "#424242", // change cursor color in hex
    cursoropacitymin: 0, // change opacity when cursor is inactive (scrollabar "hidden" state), range from 1 to 0
    cursoropacitymax: 1, // change opacity when cursor is active (scrollabar "visible" state), range from 1 to 0
    cursorwidth: "5px", // cursor width in pixel (you can also write "5px")
    cursorborder: "1px solid #fff", // css definition for cursor border
    cursorborderradius: "5px", // border radius in pixel for cursor
    zindex: "auto" | [number], // change z-index for scrollbar div
    scrollspeed: 60, // scrolling speed
    mousescrollstep: 40, // scrolling speed with mouse wheel (pixel)
    touchbehavior: false, // DEPRECATED!! use "emulatetouch"
    emulatetouch: false, // enable cursor-drag scrolling like touch devices in desktop computer
    hwacceleration: true, // use hardware accelerated scroll when supported
    boxzoom: false, // enable zoom for box content
    dblclickzoom: true, // (only when boxzoom=true) zoom activated when double click on box
    gesturezoom: true, // (only when boxzoom=true and with touch devices) zoom activated when pinch out/in on box
    grabcursorenabled: true // (only when touchbehavior=true) display "grab" icon
    autohidemode: true, // how hide the scrollbar works, possible values: 
      true | // hide when no scrolling
      "cursor" | // only cursor hidden
      false | // do not hide,
      "leave" | // hide only if pointer leaves content
      "hidden" | // hide always
      "scroll", // show only on scroll          
    background: "", // change css for rail background
    iframeautoresize: true, // autoresize iframe on load event
    cursorminheight: 32, // set the minimum cursor height (pixel)
    preservenativescrolling: true, // you can scroll native scrollable areas with mouse, bubbling mouse wheel event
    railoffset: false, // you can add offset top/left for rail position
    bouncescroll: false, // (only hw accell) enable scroll bouncing at the end of content as mobile-like 
    spacebarenabled: true, // enable page down scrolling when space bar has pressed
    railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // set padding for rail bar
    disableoutline: true, // for chrome browser, disable outline (orange highlight) when selecting a div with nicescroll
    horizrailenabled: true, // nicescroll can manage horizontal scroll
    railalign: right, // alignment of vertical rail
    railvalign: bottom, // alignment of horizontal rail
    enabletranslate3d: true, // nicescroll can use css translate to scroll content
    enablemousewheel: true, // nicescroll can manage mouse wheel events
    enablekeyboard: true, // nicescroll can manage keyboard events
    smoothscroll: true, // scroll with ease movement
    sensitiverail: true, // click on rail make a scroll
    enablemouselockapi: true, // can use mouse caption lock API (same issue on object dragging)
    cursorfixedheight: false, // set fixed height for cursor in pixel
    hidecursordelay: 400, // set the delay in microseconds to fading out scrollbars
    directionlockdeadzone: 6, // dead zone in pixels for direction lock activation
    nativeparentscrolling: true, // detect bottom of content and let parent to scroll, as native scroll does
    enablescrollonselection: true, // enable auto-scrolling of content when selection text
    cursordragspeed: 0.3, // speed of selection when dragged with cursor
    rtlmode: "auto", // horizontal div scrolling starts at left side
    cursordragontouch: false, // drag cursor in touch / touchbehavior mode also
    oneaxismousemode: "auto", // it permits horizontal scrolling with mousewheel on horizontal only content, if false (vertical-only) mousewheel don't scroll horizontally, if value is auto detects two-axis mouse
    scriptpath: "" // define custom path for boxmode icons ("" => same script path)
    preventmultitouchscrolling: true // prevent scrolling on multitouch events
    disablemutationobserver: false // force MutationObserver disabled,
    enableobserver: true // enable DOM changing observer, it tries to resize/hide/show when parent or content div had changed
    scrollbarid: false // set a custom ID for nicescroll bars 
});

Related projects

• Nicescroll for Angular

• LICENSE

Copyright 2011-17 4nkit-5hukla

Licensed under the MIT License, http://www.opensource.org/licenses/mit-license.php

Images used for zoom icons have derived from OLPC interface, http://laptop.org/8.2.0/manual/Browse_ChangingView.html