html 滚动条相关开发经验总结

我有一棵树2025-09-30 19:54

一、自定义滚动条样式

1.1 隐藏滚动条

css 复制代码

::-webkit-scrollbar {
  display: none;
}

全局隐藏滚动条

css 复制代码

* {
  scrollbar-width: none;
}

1.2 自定义滚动条样式

css 复制代码

.box {
   &::-webkit-scrollbar {
      display: inline-block;
      width: 4px;
      height: 10px;
   }
   &::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 8px;
   }
   &::-webkit-scrollbar-track {
      width: 6px;
      background: transparent;
   }
}

1.3 局部展示滚动条

假设项目中全局使用了1.1 中的方式隐藏了滚动条，并且设置了 scrollbar-width: none;

如果要想对单独的 box 元素展示滚动条，需要增加 scrollbar-width: unset 重置滚动条的宽度，且scrollbar-width 的值只能是 unset / inherit / auto，不能是 thin；

css 复制代码

.box {
   scrollbar-width: unset; // 重要
   &::-webkit-scrollbar {
      display: inline-block;
      width: 4px;
      height: 10px;
   }
   &::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 8px;
   }
   &::-webkit-scrollbar-track {
      width: 6px;
      background: transparent;
   }
}

二、横向滚动和纵向滚动

鼠标滚动只支持纵向滚动，横向滚动需要按住 shift 键，或者使用触控板，或者鼠标拖动横向滚动条来实现。

2.1 实现横向滚动

所以在一个隐藏了滚动条的项目中，如果一个元素仅能横向滚动，且需要使用鼠标能够滚动，需要我们手动实现这个功能。具体可以参考下面这篇文章。

https://blog.csdn.net/qq_17335549/article/details/145785063https://blog.csdn.net/qq_17335549/article/details/145785063