如何将HTML滚动条固定在特定div内并自定义其位置？

html如何自定义滚动条显示位置

问题：

如何将滚动条固定在某个特定div内的位置，而不显示在最右侧或最底部？

答案：

使用OverlayScrollbars库可以解决此问题。该库通过以下方式实现这一功能：

立即学习“”；

1. 隐藏默认滚动条。
2. 创建一个div来控制滚动。

操作步骤：

1. 在项目中安装OverlayScrollbars库。
2. 将该库应用到需要定製滚动区域的div。
3. 设置滚动条样式，包括位置。

代码示例：

<!-- 安装OverlayScrollbars库 -->
<script src="https://unpkg.com/overlayscrollbars@1.12.3/js/OverlayScrollbars.min.js"></script>

<!-- 将库应用到要滚动定製的div -->
<div id="my-div" style="width: 400px; height: 400px">
  ...
</div>

<!-- 设置滚动条样式 -->
<script>
  const options = {
    className: "custom-scrollbar",
    size: "12px",
    position: "left-center"
  };

  const scrollbars = OverlayScrollbars(document.getElementById("my-div"), options);
</script>

登录后复制

其中，控制滚动条的位置。以下是可用的位置选项：

• top-left
• top-center
• top-right
• bottom-left
• bottom-center
• bottom-right
• left-top
• left-center
• left-bottom
• right-top
• right-center
• right-bottom

以上就是如何将HTML滚动条固定在特定div内并自定义其位置？的详细内容，更多请关注米云其它相关文章！