jQuery的滚动条样式改变

效果

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="jquery.mCustomScrollbar.css"><style>.textarea{width: 400px;height: 200px;border: 1px solid black;overflow: auto;margin: 200px auto;}</style><script src="jquery-3.4.1.js"></script><script src="jquery.mCustomScrollbar.concat.min.js"></script><script>$(function(){$(".textarea").mCustomScrollbar();//初始化滚动条});</script>
</head>
<body><div class="textarea" data-mcs-theme="dark">//初始化滚动条abc <br>abc <br>abc <br>abc <br>abc <br>abc <br>abc <br>abc <br>abc <br>abc <br>abc <br>abc <br>abc <br>abc <br>abc <br>abc <br>abc <br>abc <br>abc <br>abc <br>abc <br>abc <br></div>
</body>
</html>

步骤：

1.进入http://manos.malihu.gr/jquery-custom-content-scroller/#expand-info
2.找到以下界面
3.进入效果预览界面，查看插件做好的滚动条效果,并且记住你想要设置的滚动条的主题
theme

4.找到第二步的界面点集 download 下载插件
5.查看插件首页的使用说明

导入下载文件包中与上图中相对应的 css 文件和 js 文件。
注意：该插件是基于jQuery的应在导入插件前先导入该插件
6.初始化滚动条的html代码和js代码

html代码中的 dark 为你想要设置滚动条的主题，参考第三步，
7.此时已经可以成功使用滚动条，但是滚动条的样式（宽度，高度等）并不一定适宜
应该改变滚动条的样式

  $(".textarea").mCustomScrollbar({set_width:120,  //控制区域的宽度set_height:200, //控制区域的高度setTop:"-50px", //y轴滚动条距离顶端的初始位置setLeft: "-50px",//x轴滚动条据左端的初始位置axis:"xy"      //设置滚动条位于x轴还是y轴或者xy轴都有});

改变滚动条各个组件的宽高及颜色等
找到下图所在位置

找到你想要改变的组件样式
如：.mCSB_dragger_bar 代表滚动块
.mCSB_button 代表向上或向左按钮

        .mCSB_dragger_bar{width: 50px !important;background: red !important;}

分别改变宽度和背景颜色，应设置 !important 增加优先级

jQuery的滚动条样式改变相关推荐

jQuery自定义滚动条样式
jQuery自定义滚动条样式比较好用的jquery插件:http://manos.malihu.gr/jquery-custom-content-scroller/
原声表格中将thead固定，tobody超出高度滚动，滚动条样式改变
css设置滚动条的样式注意:滚动条设置的width.height,分别是对应纵向滚动条宽度.横向滚动条高度,无法修改纵向滚动条高度.横向滚动条宽度数值只介绍Google浏览器滚动条样式. 常用属 ...
jquery设置滚动条样式
HTML结构下面是该滚动条插件工作所必须的HTML结构: ... content here ... CSS样式在HTML 中引入nanoscroller.css文件. 你必须为容器指定一个宽度和高 ...
css改变页面滚动条样式@令狐张豪
直接上代码: //改变滚动条宽度.ni_de_lei_ming::-webkit-scrollbar {width: 5px;}//改变滚动条样式.ni_de_lei_ming::-webkit-sc ...
css改变滚动条样式兼容火狐_jq完美解决css滚动条样式IE火狐不兼容问题
上次关于css滚动条样式的文章<美化css滚动条样式,就这么简单>,不够完美不兼容IE.火狐浏览器,但今天这篇文章可以完美解决这个问题,用到了jquery插件jquery.mCustomS ...
自定义IE浏览器滚动条样式
自定义IE浏览器滚动条样式原文地址:http://www.cnblogs.com/koleyang/p/5484922.html 追溯浏览器对滚动条的自定义,恐怕最早的就是IE浏览器了(好像最开始支 ...
css3 滚动条样式
自定义IE浏览器滚动条样式追溯浏览器对滚动条的自定义,恐怕最早的就是IE浏览器了(好像最开始支持的版本是IE5.5).下面列出了多个版本的支持性况: 滚动条样式支持情况支持浏览器版本可否继承 ...
CSS中关于滚动条样式设置的代码实例
因为在模拟开发冒险岛2游戏官网的时候,遇到一个关于滚动条样式设置的问题,如果我们不设置滚动条的样式,那么如下图所示:(特别丑陋) 但是在冒险岛的官网上呈现的样式却是: 明显感觉到视觉上的不同,那么现在 ...
自定义浏览器滚动条样式
转载自:https://www.lyblog.net/detail/314.html 自定义IE浏览器滚动条样式追溯浏览器对滚动条的自定义,恐怕最早的就是IE浏览器了(好像最开始支持的版本是IE5. ...

jQuery的滚动条样式改变

jQuery的滚动条样式改变

效果

代码

步骤：

jQuery的滚动条样式改变相关推荐

最新文章

热门文章