澳门新葡8455最新网站它是可定制的自定义滚动条的jQuery插件,那么早晚希望定义网页中的滚动条样式

澳门新葡8455最新网站 6

$(“#vertical-content”).mCustomScrollbar({

mCustomScrollbar 的使用方法

update

用法:$(selector).mCustomScrollbar(“update”);

调用 mCustomScrollbar 函数的 update
方法去实时更新滚动条当内容发生变化(例如 通过 Javascript
增加或者移除一个对象、通过 ajax
插入一段新内容、隐藏或者显示一个新内容等)

下面是例子:

$(".content .mCSB_container").append("<p>New content here...</p>");
$(".content").mCustomScrollbar("update");


$(".content .myImagesContainer").append("<img src='myNewImage.jpg' />");
$(".content .myImagesContainer img").load(function(){
    $(".content").mCustomScrollbar("update");
});


$("#content-1").animate({height:800},"slow",function(){
  $(this).mCustomScrollbar("update");
});

当新内容完全加载或者动画完成之后,update 方法一直被调用。

scrollTo

用法:$(selector).mCustomScrollbar(“scrollTo”,position);

你可以使用这个方法自动的滚动到你想要滚动到的位置。这个位置可以使用字符串(例如
“#element-id”,“bottom”
等)描述或者是一个数值(像素单位)。下面的例子将会滚动到最下面的对象

$(".content").mCustomScrollbar("scrollTo","last");

scrollTo 方法的参数

  • $(selector).mCustomScrollbar(“scrollTo”,String);:滚动到某个对象的位置,字符串型的值可以是
    id 或者 class 的名字
  • $(selector).mCustomScrollbar(“scrollTo”,”top”);:滚动到顶部(垂直滚动条)
  • $(selector).mCustomScrollbar(“scrollTo”,”bottom”);:滚动到底部(垂直滚动条)
  • $(selector).mCustomScrollbar(“scrollTo”,”left”);:滚动到最左边(水平滚动条)
  • $(selector).mCustomScrollbar(“scrollTo”,”right”);:滚动到最右边(水平滚动条
  • $(selector).mCustomScrollbar(“scrollTo”,”first”);:滚动到内容区域中的第一个对象位置
  • $(selector).mCustomScrollbar(“scrollTo”,”last”);:滚动到内容区域中的最后一个对象位置
  • $(selector).mCustomScrollbar(“scrollTo”,Integer);:滚动到某个位置(像素单位)

scrollTo 方法还有两个额外的选项参数

  • moveDragger:
    Boolean
    :滚动滚动条的滑块到某个位置像素单位,值:true,flase。例如:$(selector).mCustomScrollbar(“scrollTo”,200,{
    moveDragger:true });
  • callback:Boolean:执行回调函数当 scroll-to
    完成之后,值:true,false
    例如:$(selector).mCustomScrollbar(“scrollTo”,200,{ callback:true
    });

disable

用法:$(selector).mCustomScrollbar(“disable”);

调用 disable 方法去使滚动条不可用。如果想使其重新可用,调用
update方法。disable 方法使用一个可选参数(默认 false)你可以设置 true
如果你想重新让内容区域滚动当 scrollbar 不可用时。例如:

$(".content").mCustomScrollbar("disable",true);

可以看一些使用 disable
的例子

destroy

用法:$(selector).mCustomScrollbar(“destroy”);

调用 destroy 方法可以移除某个对象的自定义滚动条并且恢复默认样式

可以看一些使用 destroy
的例子

destroy

用法:$(selector).mCustomScrollbar("stop");
调用 destroy
方法可以移除某个对象的自定义滚动条并且恢复默认样式(当希望中断之前的scrollTo方法调用时有用)。

要禁用滚动条并重置其内容位置,请将方法的重置参数设置为true
$(selector).mCustomScrollbar("disable",true);

/* 初始化 */
$(selector).mCustomScrollbar();

/* 禁用滚动条 */
$(selector).mCustomScrollbar("disable");

/* 启用滚动条 */
$(selector).mCustomScrollbar("update");

scrollTo(x,y)

滚动到特定位置。

Parameters:

x: 水平滚动位置。数值型。

y:纵向滚动位置。数值型。

跟大多数滚动插件差不多,它首先获取要修改滚动条样式的内容区块,然后使用
CSS 隐藏掉默认滚动条,然后使用 Javascript 添加很多 HTML 结构,再配合 CSS
做出一个滚动条的效果。然后再使用 CSS 定义滚动条的样式,使用 Javascript
相应鼠标的滚动事件,产生滚动下滑的效果。

定义滚动条外观

先了解一下滚动条的 HTML 结构,下面是默认的垂直滚动条结构:

<div class="content mCustomScrollbar _mCS_1">
  <div class="mCustomScrollBox">
    <div class="mCSB_container">
      <!-- your long content here... -->
    </div>
    <div class="mCSB_scrollTools">
      <a class="mCSB_buttonUp"></a>
      <div class="mCSB_draggerContainer">
        <div class="mCSB_dragger ui-draggable">
          <div class="mCSB_dragger_bar"></div>
        </div>
        <div class="mCSB_draggerRail"></div>
      </div>
      <a class="mCSB_buttonDown"></a>
    </div>
  </div>
</div>

mCSB_buttonUp 和 mCSB_buttonDown 这两个 a 标签只有当你启用了 scroll
buttons 功能的时候,才可用。下面这个结构是 水平滚动条 的结构:

  <div class="mCustomScrollBox mCSB_horizontal">
    <div class="mCSB_container">
      <!-- your long content here... -->
    </div>
    <div class="mCSB_scrollTools">
      <a class="mCSB_buttonLeft"></a>
      <div class="mCSB_draggerContainer">
        <div class="mCSB_dragger ui-draggable">
          <div class="mCSB_dragger_bar"></div>
        </div>
        <div class="mCSB_draggerRail"></div>
      </div>
      <a class="mCSB_buttonRight"></a>
    </div>
  </div>
</div>

知道这些之后,我们就可以来定义滚动条样式了,对于同一页面多个滚动条,官方推荐如下的写法:

._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    /* 1st scrollbar dragger style... */
}
._mCS_2 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    /* 2nd scrollbar dragger style... */
}
._mCS_3 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    /* 3rd scrollbar dragger style... */
}

为了更加直观的看到要定义的滚动条区域,官方给出了一张非常形象的图片

澳门新葡8455最新网站 1

根据这张图片,就可以很容易的定义滚动条的样式了。

基本使用

  • 不得不爱开源 Wijmo jQuery
    插件集(1)-【开篇】(附演示和源码)
  • 不得不爱开源 Wijmo jQuery
    插件集(2)-【准备工作】(附30种Theme演示和源码)
  • 不得不爱开源 Wijmo jQuery
    插件集(3)-【Menu】(附页面展示和源码)
  • 不得不爱开源 Wijmo jQuery
    插件集(4)-【手风琴效果】(附页面展示和源码)
  • 不得不爱开源 Wijmo jQuery
    插件集(5)-【对话框】(附页面展示和源码)
  • 不得不爱开源 Wijmo jQuery
    插件集(6)-【Popup】(附页面展示和源码)
  • 不得不爱开源 Wijmo jQuery
    插件集(7)-【进度条】(附页面展示和源码)
  • 不得不爱开源 Wijmo jQuery
    插件集(8)-【滑动条】(附页面展示和源码)
  • 不得不爱开源 Wijmo jQuery
    插件集(9)-【日历】(附页面展示和源码)
  • 不得不爱开源 Wijmo jQuery
    插件集(10)-【Expander】(附页面展示和源码)
  • 不得不爱开源 Wijmo jQuery
    插件集(11)-【Spilter】(附页面展示和源码)
  • 不得不爱开源 Wijmo jQuery
    插件集(12)-【List】(附页面展示和源码)
  • 不得不爱开源 Wijmo jQuery
    插件集(13)-【Tooltip】(附页面展示和源码)

配置选项和参数说明

mCustomScrollbar 的参数介绍

mCustomScrollbar
这个插件的功能巨大,所以参数也很多,参数值当然更多。在介绍参数的时候,我想先为新手介绍两种参数值的写法,分别是直接的和合并的。

我们平时接触的插件用的参数,都是直接跟着参数写上参数值,这个比较直观简单。在这个插件中,参数值太多,所以把一些参数合并起来写。例如下面要介绍到的
scrollButtons
这个参数,它又有四个子属性:enable、scrollType、scrollSpeed、scrollAmount,这四个属性也分别有自己的值,来实现相应的功能。如果再加上其他的参数,那么我们应该这样写:

$("#main").mCustomScrollbar({
    scrollButtons:{
        enable:false,
        scrollType:"continuous",
        scrollSpeed:20,
        scrollAmount:40
    },
    horizontalScroll:false,
});

一定要注意闭合的括号和语句之间的逗号,新手可能会因为不小心,没有严格的按照这个规则写导致插件无法运行。好,下面我们介绍详细的参数。

  • set_width:false:设置你内容的宽度 值可以是像素或者百分比
  • set_height:false:设置你内容的高度 值可以是像素或者百分比
  • horizontalScroll:Boolean:是否创建一个水平滚动条
    默认是垂直滚动条 值可为:true(创建水平滚动条) 或 false
  • scrollInertia:Integer:滚动的惯性值 在毫秒中 使用0可以无滚动惯性
    (滚动惯性可以使区块滚动更加平滑)
  • scrollEasing:String:滚动动作类型 查看 jquery UI
    easing 可以看到所有的类型
  • mouseWheel:String/Boolean:鼠标滚动的支持 值为:true.false,像素
    默认的情况下 鼠标滚动设置成像素值 填写false取消鼠标滚动功能
  • mouseWheelPixels:Integer:鼠标滚动中滚动的像素数目
    值为以像素为单位的数值
  • autoDraggerLength:Boolean:根据内容区域自动调整滚动条拖块的长度
    值:true,false
  • scrollButtons:{ enable:Boolean }:是否添加 滚动条两端按钮支持
    值:true,false
  • scrollButtons:{ scrollType:String }:滚动按钮滚动类型
    值:”continuous”(当你点击滚动控制按钮时断断续续滚动)
    “pixels”(根据每次点击的像素数来滚动) 点击这里可以看到形象的例子
  • scrollButtons:{ scrollSpeed:Integer
    }
    :设置点击滚动按钮时候的滚动速度(默认 20)
    设置一个更高的数值可以更快的滚动
  • scrollButtons:{ scrollAmount:Integer
    }
    :设置点击滚动按钮时候每次滚动的数值 像素单位 默认 40像素
  • advanced:{ updateOnBrowserResize:Boolean
    }
    :根据百分比为自适应布局 调整浏览器上滚动条的大小 值:true,false
    设置 false 如果你的内容块已经被固定大小
  • advanced:{ updateOnContentResize:Boolean
    }
    :自动根据动态变换的内容调整滚动条的大小 值:true,false 设置成
    true 将会不断的检查内容的长度并且据此改变滚动条大小
    建议除非必要不要设置成 true 如果页面中有很多滚动条的时候
    它有可能会产生额外的移出 你可以使用 update 方法来替代这个功能
  • advanced:{ autoExpandHorizontalScroll:Boolean
    }
    澳门新葡8455最新网站,:自动扩大水平滚动条的长度 值:true,false 设置 true
    你可以根据内容的动态变化自动调整大小 可以看Demo
  • advanced:{ autoScrollOnFocus:Boolean
    }
    :是否自动滚动到聚焦中的对象 例如表单使用类似TAB键那样跳转焦点
    值:true false
  • callbacks:{ onScrollStart:function(){}
    }
    :使用自定义的回调函数在滚动时间开始的时候执行 具体请看Demo
  • callbacks:{ onScroll:function(){} }:自定义回调函数在滚动中执行
    Demo 同上
  • callbacks:{ onTotalScroll:function(){}
    }
    :当滚动到底部的时候调用这个自定义回调函数 Demo 同上
  • callbacks:{ onTotalScrollBack:function(){}
    }
    :当滚动到顶部的时候调用这个自定义回调函数 Demo 同上
  • callbacks:{ onTotalScrollOffset:Integer
    }
    :设置到达顶部或者底部的偏移量 像素单位
  • callbacks:{ whileScrolling:function(){}
    }
    :当用户正在滚动的时候执行这个自定义回调函数
  • callbacks:{ whileScrollingInterval:Integer }:设置调用
    whileScrolling 回调函数的时间间隔 毫秒单位

下面是所有参数的列表和它们的默认值

$(".content").mCustomScrollbar({
    set_width:false,
    set_height:false,
    horizontalScroll:false,
    scrollInertia:550,
    scrollEasing:"easeOutCirc",
    mouseWheel:"auto",
    autoDraggerLength:true,
    scrollButtons:{
        enable:false,
        scrollType:"continuous",
        scrollSpeed:20,
        scrollAmount:40
    },
    advanced:{
        updateOnBrowserResize:true,
        updateOnContentResize:false,
        autoExpandHorizontalScroll:false,
        autoScrollOnFocus:true
    },
    callbacks:{
        onScrollStart:function(){},
        onScroll:function(){},
        onTotalScroll:function(){},
        onTotalScrollBack:function(){},
        onTotalScrollOffset:0,
        whileScrolling:false,
        whileScrollingInterval:30
    }
});

参数配置

hScrollTo(y)

滚动到垂直位置。

Parameters:

y: The position to scroll to. The type is number.

此外,您可能需要在一个页面多次调用mCustomScrollbar,可以设置不同的选项。看下代码:

关于 mCustomScrollbar

mCustomScrollbar 是个基于 jQuery UI
的自定义滚动条插件,它可以让你灵活的通过 CSS
定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon
Aaron jquery mouse-wheel
plugin 提供了鼠标滚动的支持,并且在滚动的过程中,还可以缓冲滚动使得滚动更加的平滑,还可以自动调整滚动条的位置和定义滚动到的位置等。总之,你知道非常好用就是了,:-)

澳门新葡8455最新网站 2

下载 | 演示

想要实现一个自定义且主题好看的滚动条可以使用slimscroll和mCustomScrollbar、但是前者不能实现同时y轴和x轴,后者就可以,当然,插件越强大相对应的参数就多了,下面介绍一些基本使用。

效果预览:

axis:”x”//horizontalscrollbar

澳门新葡8455最新网站 3

自定义滚动条主题

  • 定义主题、最简单最快的方式使用插件自带的主题

$(selector).mCustomScrollbar({
  theme:"dark"
});
  • 如果插件带的主题不能满足你的需求,可以自定义主题
  • 创建一个新的主题
$(selector).mCustomScrollbar({
    theme:"my-theme"
});
  • 你的元素将获得类“mCS-my-theme”(你的主题名称带有“mCS”前缀),因此你可以使用.mCS-my-theme规则创建你的CSS
    。例如:
.mCS-my-theme.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: red; }
.mCS-my-theme.mCSB_scrollTools .mCSB_draggerRail{ background-color: white; } 
...
hScroller.scrollBarVisibility

设置横向和纵向滚动条的可见性。

Type: String

Default: ‘auto’

Remarks:

可选项有 ‘auto’, ‘visible’ and ‘hidden’.

callbacks:{ whileScrollingInterval:Integer } | 设置调用
whileScrolling 回调函数的时间间隔 毫秒单位

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

参数列表

参数 说明
setWidth: false 设置你内容的宽度 值可以是像素或者百分比
set_height:false 设置你内容的高度 值可以是像素或者百分比
axis: "string" 定义内容的滚动条 值可以是
y,x,yx。其中分别为y轴滚动条,x轴滚动,x和y轴滚动条
scrollbarPosition: "string" 设置滚动条相对于内容的位置。可用值:"inside","outside"。
"inside"(默认)使滚动条出现在元素内。 "outside"使滚动条出现在元素之外。请注意,将值设置为"outside"要求您的元素(或父元素)具有CSS position: relative(否则滚动条将与文档的根元素相关)。
autoHideScrollbar: boolean 禁用或者启用在不使用滚动条的时候隐藏,设置为true为启用,false为禁用。注意:一些特殊的主题,例如minimal会覆盖这个选项
scrollButtons:{ scrollAmount: boolean } scrollButtons:{enable:true}, true表示显示,false表示不显示
scrollButtons:{ scrollAmount: "string" } scrollButtons:{scrollType : "stepped"},stepless表示按住按钮是不断滚动,stepped表示每次点击固定一定的量(可在scrollAmount设置)
scrollButtons:{ scrollAmount: integer } 设置滚动量以像素为单位,默认值"auto"根据可滚动内容长度调整滚动量。
advanced:{ autoExpandHorizontalScroll: true } 自动扩大水平滚动条的长度 值:true,false 设置 true 你可以根据内容的动态变化自动调整大小
advanced:{ updateOnContentResize: boolean } 自动根据动态变换的内容调整滚动条的大小 值:true,false 设置成 true 将会不断的检查内容的长度并且据此改变滚动条大小 建议除非必要不要设置成 true 如果页面中有很多滚动条的时候 它有可能会产生额外的移出 你可以使用 update 方法来替代这个功能
advanced:{ updateOnImageLoad: boolean } 每当元素中的图像完全加载时,会自动更新滚动条。
advanced:{ updateOnBrowserResize:Boolean } 根据百分比为自适应布局 调整浏览器上滚动条的大小 值:true,false 设置 false 如果你的内容块已经被固定大小
callbacks:{onScroll: function(){}} 自定义回调函数在滚动中执行

Options

whileScrolling:function(){

mCustomScrollbar的原理

通过潜行者m对这些插件的使用,对这些插件的实现原理也做了一些分析。原理就是这样的:

首先获取要修改滚动条样式的内容区块,然后使用 CSS
隐藏掉默认滚动条,然后使用 Javascript 添加很多 HTML 结构,再配合 CSS
做出一个滚动条的效果。然后再使用 CSS 定义滚动条的样式,使用 Javascript
相应鼠标的滚动事件,产生滚动下滑的效果。

明白了这点,下面我们就可以看一下滚动条的结构,然后使用 CSS
对其进行定义了。

第一步、加载mCustomScrollbar样式文件mCustomScrollbar.css

eg:
<link rel="stylesheet" type="text/css" href="../jquery.mCustomScrollbar.css">


resizableOptions

该选项可以确定可调整大小的小部件的行为。

Type: Object

Default: { handles: ‘all’, helper: ‘ui-widget-content
ui-wijsuperpanel-helper’}

3、disable

本文就是介绍如何使用 mCustomScrollbar
这个插件,大部分的内容是翻译自 mCustomScrollbar
官方的介绍页面,但是根据自己的理解做了部分的调整和修改,同时增加一些自己在使用中的一些技巧。

mCustomScrollbar的方法

ScrollTo 接口

使用 JaveScript API 可以控制 wijsuperpanel 滚动到指定位置,

/*3rdscrollbardraggerstyle…*/

关于
jScrollPane,大家见过的可能比较多,但是这个插件太过于古老而且功能不强大,效果在几年前非常不错,但是放在现在就不好说了。所以我选择了后者:mCustomScrollbar。下图是两者官方示例的简单对比:

默认情况下,出现的是垂直滚动条。要添加水平或2轴滚动条,要将轴选项设置为”x”或”yx”分别调用mCustomScrollbar函数

$(".content").mCustomScrollbar({
    axis:"x" // 水平滚动条
});

$(".content").mCustomScrollbar({
    axis:"yx" // 水平和垂直滚动条
});
autoRefresh

该值可以确定wijsuperpanel是否可以在内容大小或wijsuperpanel大小改变时进行自动刷新。

Type: Boolean

Default: false

$.mCustomScrollbar; | 滚动到最右边(水平滚动条

更加进阶的使用:修改浏览器的滚动条

单单是修改某个内容区域的边栏已经无法满足我们的需求了,我们还想修改浏览器边栏应该怎么办?这当然是无法用
Javascript 来实现,因为浏览器是一个容器,Javascript
是容器里面的代码,怎么会把容器修改了呢?当然,有问题就肯定有解决方法。面对这个问题,解决方法很简单,就是虚拟出来一个浏览器窗口。

我们先添加一个 div 块,然后对这个 div 添加 position:absolute
属性,然后就可以指定它的 width 和 height 为 100% 或者稍微小点的
98%。这样,这个 div
就扩充到了整个浏览器界面,这样就可以被当做是一个网页的 body。然后加上
overflow:auto
让其超出自动出现滚动条。这样就可以模拟出修改了浏览器滚动条的效果。

转载请注明:jQuery自定义滚动条样式插件mCustomScrollbar – 前端开发-武方博

可以先下载或者先看看demo

wijprogressbar API 介绍:(点击隐藏 API)

$.mCustomScrollbar({

如何使用 mCustomScrollbar

mCustomScrollbar
这个插件的下载包里面包含了所有的插件文件和一些例子。其中以下的四个文件时必须要上传到服务器上:

  • jquery.mCustomScrollbar.js
  • jquery.mousewheel.min.js
  • jquery.mCustomScrollbar.css
  • mCSB_buttons.png

第一步:加载 mCustomScrollbar 的样式文件。

通过下面的代码,引入插件包中的 jquery.mCustomScrollbar.css 样式表文件。

<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />

第二步:加载必须的 JS 文件。

需要加载的文件有如下几个:jQuery、jQuery UI, jquery.mousewheel.min.js
和 jquery.mCustomScrollbar.js 这四个。

jQuery 和 jQuery UI 是必须的, jquery.mousewheel.min.js
是用来提供滚动支持的,jquery.mCustomScrollbar.js 则是插件的主文件。

*注:加载顺序也要按照上面代码的顺序,如果不注意加载的顺序,可能会导致失败,原因请看本人的:网页中代码的顺序是不可忽略的细节。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="jquery.mousewheel.min.js"></script>
<script src="jquery.mCustomScrollbar.js"></script>

可以把这段代码放在文档的底部来缩短加载网页内容的时间。这里使用了 Google
的 CDN 加速服务来加载 jQuery 和 jQuery
UI,当然你也可以把这两个库上传到自己的服务器上。另外注意下 jQuery UI
这个插件被作者精简了,只包含这个插件必须的模块,大小也只有 43KB。

如果当你在使用类似 Google 或者 Sina 的常用 Javascript
库的加速服务的话,更推荐采用下面的这种 fallback 的写法,如果 CDN 的
JavaScript 代码没有加载成功,就会引用本地的库,而不会导致插件无法使用:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="jquery/jquery-1.7.2.min.js"%3E%3C/script%3E'))</script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>!window.jQuery.ui && document.write(unescape('%3Cscript src="jquery/jquery-ui-1.8.21.custom.min.js"%3E%3C/script%3E'))</script>

第三步:应用 mCustomScrollbar

<script type='text/javascript'>
    (function($){
        $(window).load(function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>

这里我使用了(function($){ … })(jQuery);来包裹 jQuery
代码,这是为了避免冲突。我还用了window load ($(window).load())
来激活我的插件功能,因为这样,就可以保证在页面对象全部加载完成之后,加载我的插件。当然,你也可以使用常规的
jQuery 代码加载方法,但是你要明白 ready 和 load 方法之间的不同。一般的
jQuery 代码加载方法如下:

<script type='text/javascript'>
    (function($){
        $(document).ready(function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>

第四步:在页面中添加内容和 mCustomScrollbar 的样式

没有内容当然谈不上出现这个插件的效果了。就上述示例代码来说,我们应该在页面中定义一个
class 为 content 的 内容块。并添加一些测试数据:

<div>
    <p>测试数据.......还有很多很多</p>
</div>

这样当然不算完,自定义滚动条的样式,必须要出现滚动条才可以,所以我们还要对这个块加上一些
CSS
来让它出现滚动条,否则是没有效果的。加上的样式很简单,就是定义一个宽或者高或者宽高都定义,然后再定义一个
overflow 值为
auto。这样如果内容超出了指定的宽高,就会出现一个滚动条。例:

width:100px;height:100px;overflow:auto;

完成上述的操作之后,带有滚动条的内容块的滚动条,就变成这个插件的默认样式了。

澳门新葡8455最新网站 4

官方的默认样式相对于白色的对比度不高,所以为了显示的明显一点,我加了一个深色的背景色。

当然还有很多参数开扩展插件的功能,这些参数的使用方法过后再讲。先来说说上面用到的这些文件的用途和简单介绍:

  • jQuery:这个插件的必备库,你懂。
  • jQuery UI:扩展 jQuery
    库并且为我们的滚动条提供了简单的动画和拖动功能。
  • jquery.mousewheel.min.js:这是 Brandon
    Aaron 编写的一个伟大的只有2kb的插件,它面向所有的操作系统和浏览器,为我们提供了鼠标滚动事件的支持。
  • jquery.mCustomScrollbar.js:这是我们的插件主文件。在插件包的
    minified 你可以找到它的压缩版。
  • jquery.mCustomScrollbar.css: 这个 CSS
    文件是让我们来定义边栏用的。你可以在这个文件中定义你的边栏,当然你可以在其他的
    CSS 文件中定义,要注意的是,你要用 CSS
    中的顺序,其中的优先级关系来覆盖这个文件中的定义。否则可能会无效,关于网页中代码顺序,详情可以看一下 潜行者m 的这篇文章:网页中代码的顺序是不可忽略的细节。
  • mCSB_buttons.png: 这个 png
    图片文件,包含了向上向下向左向右滚动的按钮。可以使用 CSS sprites
    技术,来使用这个图片中的相应按钮。插件包中包含了这个图片的 PSD
    源文件(sources/mCSB_buttons.psd ),你可以根据自己的需求自定义。

完成这些,你已经可以正确的使用这个插件,并且看到了相应的效果。但是没有人愿意使用如此强大的插件来实现这个默认的效果,下面来说一下进阶的使用。

第三步、应用mCustomScrollbar

<script type='text/javascript'>
    (function($){
        $(window).load(function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>

 

用法:$.mCustomScrollbar;

第四步、在页面中添加内容和 mCustomScrollbar 的样式

自定义滚动条的样式,必须要出现滚动条才可以,下面给出一个小demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动条的实现</title>
    <style>
        #box{
            /* 外层包裹要设置宽和高,还有overflow:hidden; */
            width:400px;
            height:400px;
            overflow:hidden;
            margin: 100px auto;
            /* border: 1px solid #000; */
        }
        .content{
            /* 内容区域高度自适应 */
            white-space:nowrap; 
            width: 100%; 
            height: 100%;
            background-color: skyblue;
        }
    </style>
    <!-- 这个 CSS 文件是让我们来定义边栏用的 -->
    <link rel="stylesheet" type="text/css" href="../jquery.mCustomScrollbar.css">
</head>
<body>
<div id="box">
    <div class="content">
        <p>The element(s) you want to add scrollbar(s) should have the typical CSS properties of an overflowed block which are a height (or max-height) value, an overflow value of auto (or hidden) and content long enough to require scrolling. For horizontal scrollbar, the element should have a width (or max-width) value set.</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>
        <p>the element should have a width (or max-width) value set</p>

    </div>

</div>


<!-- 加载必须的js -->
<script type="text/javascript" src="../js/minified/jquery-1.11.0.min.js"></script>
<!-- 扩展 jQuery 库并且为我们的滚动条提供了简单的动画和拖动功能。  -->
<!-- <script type="text/javascript" src="../js/minified/jquery-ui-1.10.4.min.js"></script>   -->
<!-- 伟大的只有2kb的插件,它面向所有的操作系统和浏览器,为我们提供了鼠标滚动事件的支持。 -->
<!-- <script type="text/javascript" src="../js/minified/jquery.mousewheel.min.js"></script>  -->
<!-- 插件的主文件 -->
<script type="text/javascript" src="../js/minified/jquery.mCustomScrollbar.min.js"></script>    

<script type='text/javascript'>
    (function($){
       $(window).on("load",function(){
            $("#box").mCustomScrollbar({
                axis:"yx",
                scrollButtons:{enable:true},
                theme:"3d-dark",
                scrollbarPosition:"outside",
                callbacks:{ onScroll:function(){
                    console.log('滚动开始');
                } },

            });
            });
    })(jQuery);
</script>
</body>
</html>

显示效果:

澳门新葡8455最新网站 5

demo效果


animationOptions.easing

设置 wijsuperpanel 的缓动效果。

Type: String

Default: ‘easeOutQuad’

mCustomScrollbar原理

update

用法:$(selector).mCustomScrollbar("update");
调用 mCustomScrollbar 函数的 update
方法去实时更新滚动条当内容发生变化(例如 通过 Javascript
增加或者移除一个对象、通过 ajax
插入一段新内容、隐藏或者显示一个新内容等)

$("#treeDemo").mCustomScrollbar({
            // horizontalScroll:true,//横向滚动
            axis:"yx",
            scrollButtons:{
                enable:true,//设置是否显示按钮
                scrollType : "stepped" //点击按钮不松开时滚动的类型: "stepless"(按钮一直按下时,内容持续滚动)
            },//箭头是否显示
            theme:"3d-dark",            //滚动条主题
            scrollbarPosition:"inside",//滚动线的位置,在容器内部还是外部 inside(default)|outside (如果容器的position是static值,则添加position:relative)
            autoDraggerLength: true,//根据内容区域自动调整滚动条拖块的长度 
            autoExpandScrollbar: true,
            callbacks:{ onScroll:function(){
                console.log("开始滚动了");
            } }

        });

        $("#treeDemo").mCustomScrollbar("update");// 实时更新滚动条当内容发生变化

resized

一个在列已调整过大小时调用的函数。

Type: function

Default: null

console.log;

scrollTo

用法:$(selector).mCustomScrollbar("scrollTo",position,options);

你可以使用这个方法自动的滚动到你想要滚动到的位置。这个位置可以使用字符串(例如
“#element-id”,“bottom”
等)描述或者是一个数值(像素单位)。下面的例子将会滚动到最下面的对象.

"bottom" – 滚动到底部(垂直滚动条)
"top" – 滚动到顶部(垂直滚动条)
"right" – 滚动到最右边(水平滚动条)
"left" – 滚动到最左边(水平滚动条)
"first" – 滚动到内容区域中的第一个对象位置
"last" – 滚动到内容区域中的最后一个对象位置
"Integer"-滚动到内容区域中的最后一个对象位置

eg:$(".content").mCustomScrollbar("scrollTo","last");


vScroller.scrollBarPosition

该值用来获取或设置滚动条的位置。

Type: String

Default: ‘right’

Remarks:

可选值有 options are: ‘left’, ‘right’.

 

vScroller.scrollBarVisibility

该值用来获取或设置滚动条的可见性。Type: String

Default: ‘auto’

Remarks:

可选值有 ‘auto’, ‘visible’ and ‘hidden’.

 

vScroller.scrollLargeChange

设置横向滚动条的最大移动单位。

Type: Number

Default: null

$.mCustomScrollbar("disable",true);

主题

  • 主题的设置可以通过html设置也可以通过Javascript设置

<div class="mCustomScrollbar" data-mcs-theme="dark">
  <!-- 你的内容 -->
</div>
  • 也可以通过JavaScript设置

$(".content").mCustomScrollbar({
    theme:"dark"
});
hScroller.scrollMax

设置横向滚动条的最大值。

Type: Number

Default: 100

参考地址:

第二步、加载必须的js、有两个jqueryjquery.mCustomScrollbar.min.js还有mCSB_buttons.png

  • jquery是必须的
  • jquery.mCustomScrollbar.min.js 是插件的主文件
  • mCSB_buttons.png是插件中各种箭头的精灵图
    eg:
    <script type="text/javascript" src="../js/minified/jquery-1.11.0.min.js"></script>
    <script type="text/javascript"src="../js/minified/jquery.mCustomScrollbar.min.js"></script>
vScroller.decreaseButtonPosition

该值用来获取或设置“减少”按钮的位置。

Type: Object

Default: null

theme:”light-3″,


scrolled

该值用来获取或设置一个要在滚动结束时调用的函数。

Type: function

Default: null

Parameters:

e: EventObj relates to this event.

data: 伴随事件出发的数据。

data.dir: 滚动事件的滚动方向。

可选值: ‘v'(vertical) and ‘h'(horizontal)

data.beforePosition: 滚动之前的位置。

data.afterPosition: 滚动之后的位置。

mCustomScrollbar介绍

建立你的第一个 Wijmo jQuery wijsuperpanel
(感兴趣的朋友可以下载【资源分享中的 Demo】):

返回值

dragStop

该值用来获取或设置一个在拖动结束时要调用的函数。

Default: null

Type: Function

// Supply a callback function to handle the dragStop event:

`$(“#element”).wijsuperpanel({ dragStop:function`(e, data) { dosomething } });

// Bind to the event by type:

`$(“#element”).bind(“wijsuperpaneldragStop”,function`(e, data) { dosomething });

$.mCustomScrollbar({

vScroller.scrollMax

设置横向滚动条的最大值。

Type: Number

Default: 100

说明:

allowResize

用来获取或设置一个值,该值可以指示是否允许对大小进行调整。

Type: Boolean

Default: true

用法:$.mCustomScrollbar;

scrollChildIntoView(child)

滚动到某个子选项。

Parameters:

child: The child to scroll to. It’s a DOMElement or JQuery object.

YX:

vScroller.scrollMin

设置横向滚动条的最小值。

Type: Number

Default: 0

.mCSB_1_scrollbar.mCSB_dragger.mCSB_dragger_bar{

hScroller.decreaseButtonPosition

该值用来获取或设置“减少”按钮的位置。

Type: Object

Default: null

定义mCustomScrollbar以及一个页面多次使用

hScroller.scrollMode

该值用来确定滚动模式。

Type: String

Default: ‘scrollbar’

Remarks:

可选项有’scrollbar’, ‘buttons’, ‘buttonshover’ and ‘edge’.

 

hScroller.scrollSmallChange

设置横向滚动条的最小移动单位。

Type: Number

Default: null

scrollButtons:{ enable:Boolean } | 是否添加 滚动条两端按钮支持
值:true,false

animationOptions.disabled

禁用 wijsuperpanel 动的动画属性。

Type: Boolean

Default: false

在上面的例子中,每个滚动事件结束的时间和内容已经停止滚动,内容顶部将被记录在浏览器的控制台。对于每个滚动事件都有对应的回调函数,如下:

澳门新葡8455最新网站 6

.mCSB_3_scrollbar.mCSB_dragger.mCSB_dragger_bar{

Methods

callbacks:{ whileScrolling:function(){} } |
当用户正在滚动的时候执行这个自定义回调函数

特性

callbacks:{

vScroller.firstStepChangeFix

在滚动第一步(从0值开始滚动)时,该值可添加到小的变化或大的变化。

Type: Number

Default: 0

mouseWheelPixels:Integer | 鼠标滚动中滚动的像素数目
值为以像素为单位的数值

HTML 标签:

它是可定制的自定义滚动条的jQuery插件。其特点包括垂直或水平滚动条,可调滚动箭头,鼠标滚轮,键盘和触摸支持,可以通过自定义CSS主题,RTL方向的支持,用户可以定义回调函数等等。适用于各种终端,牛掰啊!

hScroller.scrollMin

设置横向滚动条的最小值。

Type: Number

Default: 0

autoDraggerLength:Boolean | 根据内容区域自动调整滚动条拖块的长度
值:true,false

animationOptions.duration

设置 wijsuperpanel 属性的持续时间。

Type: Number

Default: 250

使用JS调用mCustomScrollbar,代码如下:

hScroller.scrollBarPosition

该值用来获取或设置滚动条的位置。

Type: String

Default: ‘bottom’

Remarks:

可选项有 ‘bottom’ and ‘top’。

scrollButtons:{ scrollSpeed:Integer } |
设置点击滚动按钮时候的滚动速度 设置一个更高的数值可以更快的滚动

vScroller.scrollValue

设置横向滚动条的移动单位。

Type: Number

Default: 0

advanced:{ autoScrollOnFocus:Boolean } | 是否自动滚动到聚焦中的对象
例如表单使用类似TAB键那样跳转焦点 值:true false

keyDownInterval

用来获取或设置一个值,该值可以确定在连续按键时进行滚动的时间间隔。

Type: Number

Default: 100

functionmyCustomFn{

scrolling

该值用来获取或设置一个要在滚动结束时调用的函数。

Type: function

Default: null

Parameters:

e: EventObj relates to this event.

data: The data with this event

data.oldValue: The scrollValue before scrolling occurs

data.newValue: The scrollValue after scrolling occurs

data.dir: The direction of the scrolling action

Possible values: ‘v'(vertical) and ‘h'(horizontal)

data.beforePosition: The position of the content before scrolling occurs

相关文章

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图