定位滚动条到特定 div

在网页中，默认的滚动条位置通常在最右侧或最底部。但是，有时需要将滚动条放置在特定位置，例如在某个 div 内。

使用 OverlayScrollbars 库

解决此问题的常用方法是使用 [OverlayScrollbars](https://github.com/KingSora/OverlayScrollbars) 库。该库允许隐藏默认滚动条并使用 div 控制滚动。

Pilot Digital Twin Setup

部署一个包含 4 个智能体（agent）的数字孪生平台。在以下情况下使用该技能： 1. 用户希望为物理资产监控与预测性维护等场景搭建数字孪生系统……

下载

使用步骤

1. 导入 OverlayScrollbars 库到你的项目中。
2. 为要控制滚动条的 div 添加以下类：

<div class="os-host">
  ...
</div>

3. 初始化 OverlayScrollbars 实例：

const os = OverlayScrollbars(document.querySelector('.os-host'), {
  scrollbars: {
    autoHide: 'leave',
    visible: true,
    size: '10px',
    autoHideDelay: 200
  }
});

4. 此时，滚动条就可以控制 div 内的滚动。

效果

使用 OverlayScrollbars 库后，你会看到：

• 默认滚动条被隐藏。
• 为 div 添加了一个新的滚动条。
• 滚动条的大小、可见性和其他属性可以通过库进行自定义。