下载地址:http://files.cnblogs.com/files/LoveOrHate/jquery.nicescroll.min.js

 <script src="jquery.nicescroll.js"></script>
$(document).ready(
function() {
$("html").niceScroll();
}
);
var nice = false;
$(document).ready(
function() {
nice = $("html").niceScroll();
}
);
$(document).ready(
function() {
$("#thisdiv").niceScroll({cursorcolor:"#00F"});
}
);
 $(document).ready(
function() {
$("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});
}
);
var nice = $("#mydiv").getNiceScroll();
$("#mydiv").getNiceScroll().hide();
$("#mydiv").getNiceScroll().resize();

入门篇的一些插件

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:false)
  • hwacceleration - use hardware accelerated scroll when supported (default:true)
  • boxzoom - enable zoom for box content (default:false)
  • dblclickzoom - (only when boxzoom=true) zoom activated when double click on box (default:true)
  • gesturezoom - (only when boxzoom=true and with touch devices) zoom activated when pitch out/in on box (default:true)
  • grabcursorenabled, display "grab" icon for div with touchbehavior = true, (default: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)
  • enablemouselockapi, can use mouse caption lock API (same issue on object dragging) (default:true)
  • cursorfixedheight, set fixed height for cursor in pixel (default:false)
  • hidecursordelay, set the delay in microseconds to fading out scrollbars (default:400)
  • directionlockdeadzone, dead zone in pixels for direction lock activation (default:6)
  • nativeparentscrolling , detect bottom of content and let parent to scroll, as native scroll does (default:true)
  • enablescrollonselection, enable auto-scrolling of content when selection text (default:true)

Jquery自定义滚动条插件的更多相关文章

  1. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  2. jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏

    一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...

  3. 11 个最佳 jQuery 模拟滚动条插件 scrollbar

    1.  Windows:全屏窗口滚动插件 该插件可以很好地实现全屏滚动,每滚动一次即为一屏.比如,用户浏览下一屏幕内容时,只需手动滚动到某一位置,该插件会自动滚动显示下一屏全部内容.对于浏览类似于PP ...

  4. javascript自定义滚动条插件,几行代码的事儿

    在实际项目中,经常由于浏览器自带的滚动条样式太戳,而且在各个浏览器中显示不一样,所以我们不得不去实现自定义的滚动条,今天我就用最少的代码实现了一个自定义滚动条,代码量区区只有几十行,使用起来也非常方便 ...

  5. 炫酷JQUERY自定义对话框插件JDIALOG_JDIALOG弹出对话框和确认对话框插件

    多种类型自定义对话框插件jDialog是一款基于jquery实现的轻量级多种类型的自定义对话框插件 在项目开发中.一般会美化 alert(); 的样式.那么今天我就和大家分享一款非常炫的插件 先来看一 ...

  6. 【jquery】jquery 自定义滚动条

    可以自由的给滚动条定义背景,上下按钮,当然不仅仅是颜色,连图片当背景也可以.支持鼠标滚轮,点击滚动条滚轴定位,上下按钮久按加速,兼容 ie,firefox,chrome. 调用方法: $(" ...

  7. jQuery框架-3.jQuery自定义封装插件和第三方插件

    一.jQuery的封装扩展 1.jQuery中extend方法使用 (挂在到jQuery和jQuery.fn两对象身上的使用) 1.1.官方文档定义: jQuery.extend   Merge th ...

  8. JavaScript学习笔记- 自定义滚动条插件

    此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-us ...

  9. jquery美化滚动条插件jscrollpane应用(转)

    原文地址:http://www.jqcool.net/jquery-jscrollpane.html jScrollPane是一个设计非常灵活的跨浏览器的jQuery ,它将浏览器的默认滚动条或是元素 ...

随机推荐

  1. ECS centos7 使用外部邮件服务商的465加密端口

    ECS centos7 使用外部邮件服务商的465加密端口发送邮件. 1.修改/etc/mail.rc 文件中添加以下的 set smtp="smtps://smtp.163.com:465 ...

  2. GitHub 新手教程 六,Git GUI 新手教程(3),从GitHub远端同步代码库

    从GitHub把代码库下载到本地: 1,打开 GitGUI,单击我们之前克隆好的本地库: 2,按图片所示点击,同步远端代码: 3,出现如下提示后,点击“Close”: 4,上面只是把代码下载下来,还没 ...

  3. Redis源码阅读(二)高可用设计——复制

    Redis源码阅读(二)高可用设计-复制 复制的概念:Redis的复制简单理解就是一个Redis服务器从另一台Redis服务器复制所有的Redis数据库数据,能保持两台Redis服务器的数据库数据一致 ...

  4. ABP中文文档及源码说明

    目录 ABP.ModuleZero(ABP自带的一套用户模块) 版本管理(Edition) 特性管理(Feature)

  5. 技术进阶:Kubernetes高级架构与应用状态部署

    在了解Kubernetes应用状态部署前,我们先看看Kubernetes的高级架构,方便更好的理解Kubernetes的状态. Kubernetes 的高级架构 包括应用程序部署模型,服务发现和负载均 ...

  6. 微软职位内部推荐-SW Engineer II for Embedded System

    微软近期Open的职位: Do you have a passion for embedded devices and services? &nbsp Does the following m ...

  7. Leetcode题库——48.旋转图像

    @author: ZZQ @software: PyCharm @file: rotate.py @time: 2018/11/16 15:41 要求:给定一个 n × n 的二维矩阵表示一个图像.将 ...

  8. 重温redis命令

    redis是已知的性能最快的key-value 数据库. 1.key相关命令 exists key :检查指定的key是否存在 1表示存在 0表示不存在 del key1,key2,key3....: ...

  9. Linux命令(四)删除文件 rm

    用户可以使用 rm 命令删除不需要的文件. rm 可以删除文件或目录,并且支持通配符. 如果目录中存在其它文件则会递归删除. 删除软链接只是删除链接,对应的文件或目录不会被删除. 软链接类似于 win ...

  10. 如何自定义微信小程序swiper轮播图面板指示点的样式

    https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...