当前位置: 首页 > 工具软件 > BetterScroll > 使用案例 >

Javascript 滚动条插件 BetterScroll 2.0 Script加载 精简版 只带滚动条和鼠标滚动功能

拓拔元徽
2023-12-01

简介

需求
我需要一个自制一个滚动条组件来替代浏览器默认的滚动条,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 来解决这个问题其实也并不是很有必要,可以说是大材小用,自己写一个组件的话,估计代码也就几百行就够了。

 类似资料: