Javascript 滚动条插件 BetterScroll 2.0 Script加载 精简版 只带滚动条和鼠标滚动功能
拓拔元徽
简介
需求
我需要一个自制一个滚动条组件来替代浏览器默认的滚动条，BetterScroll 2.0 是一个非常棒的的一个滚动插件 ，它能解决我的这个问题。
问题
虽然 BetterScroll 2.0 能解决我的问题，但由于我是需要使用 Script 加载 的方式引入到我的网站，而官方只提供了提供了 具备所有插件能力(106KB) 和 基础功能(38.32KB) ，只使用基础功能并不能解决我上面的问题，但使用全功能的又太浪费资源。因此我需要按需引入 MouseWheel 和 ScrollBor
正文
下载文件
前往下载文件(54KB)是我根据上面需求处理过后的文件
使用
相关链接
better-scroll 核心滚动
mouseWheel 扩展 BetterScroll 鼠标滚轮的能力。
scrollbar 插件为 BetterScroll 提供了样式美观的滚动条。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.wrapper {
width: 200px;
height: 400px;
overflow: hidden;
position: relative;
}
</style>
<div id="wrapper" class="wrapper">
<ul class="content">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li style="height: 600px;">...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
<script src="better-scroll.js"></script>
<script>
let scroll = BetterScroll.createBScroll('#wrapper', {
freeScroll: true,
click: true,
mouseWheel: true,
scrollbar: {
interactive: true,
scrollbarTrackClickable: true
}
})
</script>
</body>
</html>
结语
BetterScroll 2.0 有不少奇妙的使用方式，就看你怎么解决了。
其实 自制一个滚动条组件来替代浏览器默认的滚动条 使用 BetterScroll2.0 来解决这个问题其实也并不是很有必要，可以说是大材小用，自己写一个组件的话，估计代码也就几百行就够了。
类似资料：