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

最新推荐文章于 2023-05-28 11:28:32 发布

Shopify 专家

最新推荐文章于 2023-05-28 11:28:32 发布

阅读量365

点赞数 1

分类专栏： JavaScript 文章标签： javascript html css

本文链接：https://blog.csdn.net/BaymaxCSDN/article/details/120727125

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

简介

需求
我需要一个自制一个滚动条组件来替代浏览器默认的滚动条，BetterScroll 2.0 是一个非常棒的的一个滚动插件，它能解决我的这个问题。
问题
虽然 BetterScroll 2.0 能解决我的问题，但由于我是需要使用 Script 加载的方式引入到我的网站，而官方只提供了提供了具备所有插件能力(106KB) 和基础功能(38.32KB) ，只使用基础功能并不能解决我上面的问题，但使用全功能的又太浪费资源。因此我需要按需引入 MouseWheel 和 ScrollBor

正文

下载文件

前往下载文件(54KB)是我根据上面需求处理过后的文件

使用

示例代码

<!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 来解决这个问题其实也并不是很有必要，可以说是大材小用，自己写一个组件的话，估计代码也就几百行就够了。

Shopify 专家

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Javascript 滚动条插件 BetterScroll 2.0 Script加载精简版只带滚动条和鼠标滚动功能

简介需求我需要一个自制一个滚动条组件来替代浏览器默认的滚动条，BetterScroll 2.0 是一个非常棒的的一个滚动插件，它能解决我的这个问题。问题虽然 BetterScroll 2.0 能解决我的问题，但由于我是需要使用 Script 加载的方式引入到我的网站，而官方只提供了提供了具备所有插件能力(106KB) 和基础功能(38.32KB) ，只使用基础功能并不能解决我上面的问题，但使用全功能的又太浪费资源。因此我需要按需引入 MouseWheel 和 ScrollBor正文下载文
复制链接

扫一扫