NiceScroll文档阅读笔记-NiceScroll(3.7.6)基本使用

最新推荐文章于 2024-03-14 11:53:25 发布

IT1995

最新推荐文章于 2024-03-14 11:53:25 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript web前端文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq78442761/article/details/122853329

前言

官方已经给出很好的文档了。在此本人总结下，方便以后查阅：

GitHub - inuyaksa/jquery.nicescroll: nicescroll plugin for jquery - scrollbars like iphone/ipad

nicescroll是一个jquery的插件，需要先包含jquery，再使用这框架，NiceScroller可用于jQuery1.x/2.x/3.x版本，但不能在slim版本中使用。

使用

首先需要先保护jQuery，，然后再把jquery.nicesroll.min.js和zoomico.png放到项目中，注意，zoomico.png要和jquery.nicescroll.min.js放到同一个目录下。

注意：如果不需要使用NiceScroll提供了zoom功能，就不需要加入zoomic.png图片。

通常在document的ready的时候的初始化NiceScroll

// 1. Simple mode, it styles document scrollbar:【直接替换传统的scroll】
$(function() {  
    $("body").niceScroll();
});

// 2. Instance with object returned:【获取body中替换的NiceScroll对象】
var nice = false;
$(function() {  
    nice = $("body").niceScroll();
});

// 3. Style a DIV and change cursor color:【改变div的style】
$(function() {  
    $("#thisdiv").niceScroll({cursorcolor:"#00F"});
});

// 4. DIV with "wrapper", formed by two divs, the first is the vieport, the latter is the content:【div嵌套时的用法，外层的叫viewport，内层的是warpper】
$(function() {
    $("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});
});

// 5. Get nicescroll object:【获取NiceScroll对象】
var nice = $("#mydiv").getNiceScroll();

// 6. Hide scrollbars:【隐藏Scrollbars】
$("#mydiv").getNiceScroll().hide();

// 7. Check for scrollbars resize (when content or position have changed):【当内容和位置发生改变时，就要使用resize这个函数了】
$("#mydiv").getNiceScroll().resize();

// 8. Scrolling to a position:【获取sroll的位置，x轴和y轴】
$("#mydiv").getNiceScroll(0).doScrollLeft(x, duration); // Scroll X Axis
$("#mydiv").getNiceScroll(0).doScrollTop(y, duration); // Scroll Y Axis

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!