控制滚动条显示位置

问题：如何在 HTML 中控制滚动条显示的位置，使其显示在特定 div 内或特定位置？

回答：

可以使用 OverlayScrollbars 库来解决此问题。该库可以隐藏默认滚动条，并定义一个 div 来控制滚动。

使用 OverlayScrollbars 库

立即学习“前端免费学习笔记（深入）”；

1. 导入 OverlayScrollbars 库：

   <script src="path/to/overlayScrollbars.min.js"></script>

   登录后复制

2. 初始化滚动条：

   const myScrollbar = OverlayScrollbars(document.querySelector('.my-div'), {
     className: 'os-theme-light', // 设置主题
     scrollbars: {
    autoHide: 'move', // 自动隐藏滚动条
     },
   });

   登录后复制

3. 设置滚动条位置：

   myScrollbar.scroll({
     x: 100, // 设置水平滚动条位置
     y: 200, // 设置垂直滚动条位置
   });

   登录后复制

示例

以下示例将创建一个 div 并使用 OverlayScrollbars 控制其滚动条：

<div class="my-div" style="width: 500px; height: 500px; overflow: auto;">
  <!-- 内容 -->
</div>

<script>
  const myScrollbar = OverlayScrollbars(document.querySelector('.my-div'), {
    className: 'os-theme-light',
    scrollbars: {
      autoHide: 'move',
    },
  });

  myScrollbar.scroll({
    x: 100,
    y: 200,
  });
</script>