Jquery自定义滚动条插件

下载地址: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)
时间: 2024-11-07 10:15:56

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

jQuery自定义滚动条插件mCustomScrollbar

写项目的时候遇到了这种情况 我用了两个iframe,左边是一个菜单栏,可以展开也可以收回去的.就说这个滚动条太丑了,是浏览器默认的,所以学着用mCustomScrollbar来解决一下这个问题. 1:资源下载 https://github.com/malihu/malihu-custom-scrollbar-plugin,我是从这里下载的. 2:引入 注意顺序. <link rel="stylesheet" type="text/css" href="

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

如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScrollPane,大家见过的可能比较多,但是这个插件太过于古老而且功能不强大,效果在几年前非常不错,但是放在现在就不好说了.所以我选择了后者:mCustomScrollbar.下图是两者官方示例的简单对比: 本文就是介绍如何使用 mCustomScrollbar 这个插件,大部分的内容是翻译自 mCus

基于jQuery的滚动条插件-jquery.jscrollbar

jquery.jscrollbar 是一个基于jQuery的滚动条插件,支持水平滚动条和垂直滚动条,支持鼠标键盘事件 主要功能 支持水平滚动条 支持垂直滚动条 自动判断水平滚动条和垂直滚动条是否显示 支持外部调用来滚动内容 支持滚动条部分样式自定义 支持键盘方向键控制 支持鼠标滚动(需要mousewheel插件) 支持滚动条显示位置设置(外部|悬浮) 支持手动更新界面 依赖的库 jQuery (http://jquery.com/) jquery.jqdrag (https://github.c

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

原文地址:http://www.jqcool.net/jquery-jscrollpane.html jScrollPane是一个设计非常灵活的跨浏览器的jQuery ,它将浏览器的默认滚动条或是元素溢出时出现的滚动条映射成一个HTML结构,从而很容易地使用CSS来定义滚动的样式.下面来看下这个强大而灵活的jScrollPane的使用方法吧. 引入核心文件,为了更方便的使用,这里引入了mousewheel库 <!-- styles specific to demo site --> <l

javascript自定义滚动条插件.

在实际项目中,经常由于浏览器自带的滚动条样式太戳,而且在各个浏览器中显示不一样,所以我们不得不去实现自定义的滚动条,今天我就用最少的代码实现了一个自定义滚动条,代码量区区只有几十行,使用起来也非常方便. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title

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

在实际项目中,经常由于浏览器自带的滚动条样式太戳,而且在各个浏览器中显示不一样,所以我们不得不去实现自定义的滚动条,今天我就用最少的代码实现了一个自定义滚动条,代码量区区只有几十行,使用起来也非常方便. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title

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

多种类型自定义对话框插件jDialog是一款基于jquery实现的轻量级多种类型的自定义对话框插件 在项目开发中.一般会美化 alert(); 的样式.那么今天我就和大家分享一款非常炫的插件 先来看一下程序最后的效果图片吧 下面是HTMl代码 <center> <button id="test1">alert方式调用</button> <br/><br/> <button id="test2">

实战-jQuery实现自定义滚动条插件

效果图: 这篇文章主要讲解js交互,就不用篇幅去告诉大家怎么写html css了,让文章言简意赅. 大体思路: 如何实现滚动滑块,让滑块与内容一起联动呢?请看下图: 首先来看, 空心鼠标位置与实心鼠标位置的距离 是不是等于滑块移动的距离X0 呢? 答:等于 滑块移动的最大距离X0是多少呢? 答:滚动条的高度X - 滑块的高度 内容能滚动最大高度Y0是多少呢? 答:内容总高度Y - 内容可视区的高度 通过比较:可以得出滚动比率: 那么代码应该怎么写呢: 第一步: 获取鼠标移动距离 = 滑块移动距离

jQuery自定义滚动条样式插件mCustomScrollbar 兼容IE7的方法

Here is what is in my ie7.css:.mCSB_scrollTools .mCSB_draggerRail{width:2px;height:100%;margin:0 0 0 -1px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;left: 50%;position: absolute;}.mCSB_scrollTools .mCSB_buttonDown{top: auto