jQuery自定义内容滚动条插件

深藏阁楼爱情的钟 2022-08-18 11:55 622阅读 0赞

#### 使用方法： ####

首先下载插件：[http://manos.malihu.gr/jquery-custom-content-scroller/][http_manos.malihu.gr_jquery-custom-content-scroller]

#### 一、HTML ####

引入以下文件

<link rel="stylesheet" href="/jquery.mCustomScrollbar.css" />
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.mCustomScrollbar.concat.min.js"></script>

#### 二、CSS ####

首先必须要有滚动条出现，给DIV限定高度,并指定overflow样式为auto,

这样当内容超出后就会自动出现滚动条了

<style>
      .div-height { width: 300px; height: 300px; overflow: auto; }
    </style>

#### 三、初始化HTML ####

<div class="content" data-mcs-theme="dark">
       
    </div>

#### 四、初始化JS ####

<script>
        $(function(){ 
         $(".content").mCustomScrollbar();
        })
    </script>

效果演示：[jquery\_scroller][jquery_scroller]

官网：[http://manos.malihu.gr/jquery-custom-content-scroller/][http_manos.malihu.gr_jquery-custom-content-scroller]

作者：[itmyhome][]

[http_manos.malihu.gr_jquery-custom-content-scroller]: http://manos.malihu.gr/jquery-custom-content-scroller/
[jquery_scroller]: http://itmyhome.com/jquery_scroller/
[itmyhome]: http://blog.csdn.net/itmyhome1990

发表评论取消回复

表情：

评论列表（有 0 条评论，622人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery自定义插件

您查询的关键词是： [jquery][] [自定义插件][Link 1] 。如果打开速度慢，可以尝试 [快速版][Link 2]；如果想保存快照，可以 [添加到搜藏][Link

柔情只为你懂/ 2022年10月02日 04:44/ 0 赞/ 331 阅读

相关 jQuery自定义内容滚动条插件

使用方法：首先下载插件：[http://manos.malihu.gr/jquery-custom-content-scroller/][http_manos.mali

深藏阁楼爱情的钟/ 2022年08月18日 11:55/ 0 赞/ 623 阅读

相关【JQuery】HTML自定义滚动条（mCustomScrollbar）

实现效果如下所示 ![图示][SouthEast] mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件，它可以让你灵活的通过 CSS 定义网

比眉伴天荒/ 2022年06月15日 01:28/ 0 赞/ 286 阅读

相关 Jquery插件Nicescroll 制作滚动条

jquery.nicescroll.min.js滚动条使用方法,Nicescroll 是制作自定义滚动条的jq插件。支持div,iframe,html等使用,兼容IE7-8,s

╰+攻爆jí腚メ/ 2022年06月13日 10:47/ 0 赞/ 442 阅读

相关 jQuery插件之 Nicescroll滚动条

Nicescroll滚动条插件是一个非常强大的基于JQUERY的滚动条插件，不需要增加额外的css，几乎全浏览器兼容。ie6+，实现只需要一段代码，侵入性非常小，样式可完全自定

今天药忘吃喽~/ 2022年05月30日 02:50/ 0 赞/ 698 阅读

相关 JQuery自定义插件详解之Banner图滚动插件

> 前言 > > JRedu > > 　JQuery是什么相信已经不需要详细介绍了。作为时下最火的JS库之一，JQuery将其“Write Less，Do More！”

迷南。/ 2022年03月30日 15:42/ 0 赞/ 790 阅读

相关超棒的自定义超酷滚动条jQuery插件 - Perfect Scrollbar

日期：2013-2-16 来源：[GBin1.com][] [![超棒的自定义超酷滚动条jQuery插件 - Perfect Scrollbar][jQuery_ -

た入场券/ 2022年03月30日 08:25/ 0 赞/ 384 阅读

相关 jQuery自定义插件

1.对象级别的插件开发，即给jQuery对象添加方法，封装对象方法的插件，如:parent()、appendTo() 2.一种是类级别的插件开发，即给jQuery添加新的全局

你的名字/ 2021年12月21日 18:23/ 0 赞/ 550 阅读

相关 jQuery自定义插件

很久没接触jQuery了，陌生到连我自己都不认识自己了。刚好有人问到，那现在温习一下jQuery自定义插件：浅谈jQuery编写插件的两种方法：第一种：$.extend

忘是亡心i/ 2021年11月26日 22:46/ 0 赞/ 497 阅读

相关 jquery 自定义滚动条

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl

以你之姓@/ 2021年09月15日 07:20/ 0 赞/ 607 阅读