首页 > 其他分享 >jQuery custom scrollbarjQuery自定义滚动条

jQuery custom scrollbarjQuery自定义滚动条

时间:2023-02-14 15:35:52浏览次数:43  
标签:jQuery 文件 自定义 custom 滚动条 scrollbar js


可以去GitHub上找对应的文件下载,

​​https://github.com/mustache/mustache.github.com​​.

点击下载压缩包

jQuery custom scrollbarjQuery自定义滚动条_jQuery


下载完custom scrollbar 的压缩包,解压,找到里面下张图两个划线的css文件和js文件就可以用了。

要注意的是要先导入jQuery custom scrollbar的css文件,再导入我们自己的css文件,js文件也是一样,先导入jQuery的js再导入jQuery custom scrollbar 的js文件,最后才是我们自己写的js文件

jQuery custom scrollbarjQuery自定义滚动条_jquery_02

<head>
<meta charset="UTF-8">
<title>music</title>
<link rel="stylesheet" href="../jquery.mCustomScrollbar.css">
<link href="../../../img/sup.ico" rel="icon">
<link href="../css/style.css" rel="stylesheet">
<script src="../../../jquery-3.4.1.min.js"></script>
<script src="../jquery.mCustomScrollbar.concat.min.js"></script>
<script src="../js/index.js"></script>
</head>

初始化js,在js中初始化jQuery custom scrollbar

$(function () {
//自定义滚动条
$('.list').mCustomScrollbar();//.list为我要设置的元素的class
});

初始化html,在html中找到要设置的元素,比如要给ul设置个自定义滚动条,在后面加上data-mcs-theme="minimal-dark"就行

<ul class="list" data-mcs-theme="minimal-dark">

这样就可以实现了

jQuery custom scrollbarjQuery自定义滚动条_jquery_03


原本是这样的

jQuery custom scrollbarjQuery自定义滚动条_jquery_04


可以去官网查看各种样式的滚动条: ​​http://manos.malihu.gr/jquery-custom-content-scroller/​


标签:jQuery,文件,自定义,custom,滚动条,scrollbar,js
From: https://blog.51cto.com/u_15964288/6056968

相关文章

  • VSCode自定义颜色样式以及背景图片
    ​​"terminal.integrated.fontFamily":"MesloLGMforPowerline"​​看以前的‘美化’太丑了,还是吸血鬼好看"workbench.colorCustomizations":{"activityBar.b......
  • jQuery-概念、jQuery快速入门
    jQuery-概念概念:一个JavaScript框架,简化js开发jQuery是一个快速,简介的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)jQuery设计的......
  • 自定义数据库项目工程
      各模块功能及依赖总结通过几个例子,来看一下各个模块之间是怎么相互工作的.总结来自NYADB作者,针对声哥的源码进行简单修改。https://qw4990.gitbooks.io/nyadb/c......
  • JQuery对象和JS对象的区别与转换
    JQuery对象和JS对象区别与转换1JQuery对象在操作时更加方便2JQuery对象和js对象方法不通用的3两者相互转换jq转js:jq对象[索引]或jq对象,get......
  • jQuery1.0.3<3.5.0xss漏洞
    起因: 升级方法:1.找到jQuery文件,我的路径为:/src/main/webapp/plugin/jquery/js/jquery.min.js2.下载需要升级的jQuery文件到指定目录,建议与升级前的jQuery文件同目录。下......
  • Android 自定义变化的文本控件ColorChangeView
    实例图说明图/***有颜色过渡变化的textview**@ProjectApp_View*@Packagecom.android.view.colortextview*@authorchenlin*@version1.0*@NoteTODO*//*......
  • mysql 循环批量建表(表结构相同,表名可以自定义)
    1.情景展示现在有这样一种需求:我需要建两百多张表,这些表的表结构相同,表的名称也是提前拟定好的,必须使用指定的表名;如果使用一个个写SQL语句,那不还得累死,所以,我想到了可不可......
  • C# WPF UI开发自定义圆形按钮样式
    圆形按钮有很多种实现方式,例如第一种方式在样式中用Ellipse画一个圆形,宽度和高度一致。第二种方式用Border设置Width,Height,CornerRadius一致也可以画圆。第三种方式用Pat......
  • C语言学习笔记(八): 自定义数据类型
    结构体变量什么是结构体C语言允许用户自己建立由不同类型数据组成的组合型的数据结构,它称为结构体结构体的成员可以是任何类型的变量,如整数,字符串,浮点数,其他结构体,指针......
  • Solon2 开发之IoC,九、自定义注解开发汇总
    1、定义构建能力注解,比如@Controller注解类:@Target({ElementType.TYPE})@Retention(RetentionPolicy.RUNTIME)@Documentedpublic@interfaceController{}注解类......