自定义滚动条，基于JQ的自定义滚动条
有时浏览器的滚动条看上去不是很美观，显得与整体页面格格不入，今天分享一个mCustomScrollbar方法最基础的自定义滚动条的方法
需要的 JS 及 CSS 文件
网盘地址链接: https://pan.baidu.com/s/1Mc3vg5GNplWxqMcp0TyCsg.
提取码： ye69
1、首先引入所需文件
<head>
<link rel="stylesheet" href="./jquery.mCustomScrollbar.css">
<script src="./jquery-3.3.1.min.js"></script>
<script src="./jquery.mCustomScrollbar.concat.min.js"></script>
</head>
2、HTML结构
<body>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
</body>
3、CSS样式
注：容器需要一个固定高度，毕竟这样才会触发滚动条
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 400px;
height: 150px;
background-color: pink;
color: #ff3040;
overflow: hidden;
}
li {
list-style: none;
}
</style>
4、JS代码
垂直滚动条
<script>
$(function () {
//容器直接调用该方法即可
$('ul').mCustomScrollbar({ scrollInertia: 150 });//150 => 将滚动动量的量设置为动画持续时间（以毫秒为单位）
})
</script>
水平滚动条
<script>
$(function () {
//容器直接调用该方法即可
$('ul').mCustomScrollbar({ horizontalScroll: true });
})
</script>
- -CSS文件中 145 行可更改滚动条颜色- -