嘿，我懂你的需求——就是要那种MacBook自带的、默认藏起来，只有滚动或者hover时才显示的优雅滚动条对吧？之前你设置后一直显示成Windows风格，应该是没做好默认隐藏和状态切换的逻辑，下面我一步步给你讲怎么用WebKit的CSS属性实现：

1. 先给滚动容器打基础 #

首先得确保你的滚动容器能正常滚动，同时默认把原生滚动条藏起来：

.scroll-container {
  overflow-y: auto; /* 开启垂直滚动，需要横向滚动的话换成overflow-x */
  height: 400px; /* 这里给个示例高度，你得根据自己的布局调整 */
  /* 顺带提下非Webkit浏览器的兼容（可选） */
  scrollbar-width: none; /* Firefox的隐藏方式 */
  -ms-overflow-style: none; /* IE/Edge的隐藏方式 */
}

/* Webkit内核（Chrome/Safari/Edge Chromium）默认隐藏滚动条 */
.scroll-container::-webkit-scrollbar {
  width: 6px; /* 先留好宽度，默认设为透明 */
  opacity: 0;
  transition: opacity 0.2s ease; /* 加个平滑过渡，避免显示隐藏太突兀 */
}

2. 自定义滚动条的样式 #

接下来给滚动条的轨道和滑块设置样式，贴近Mac的原生质感：

/* 滚动条轨道的样式，默认透明 */
.scroll-container::-webkit-scrollbar-track {
  background-color: transparent;
}

/* 滚动条滑块（就是你拖动的那个部分） */
.scroll-container::-webkit-scrollbar-thumb {
  background-color: rgba(140, 140, 140, 0.5); /* 半透明灰，和Mac原生风格接近 */
  border-radius: 3px; /* 圆角处理，更贴合Mac的圆润设计 */
}

3. 让滚动条在需要时显示 #

现在要设置状态：当容器被hover、聚焦，或者正在滚动时，让滚动条显示出来：

/* hover、聚焦、激活时显示滚动条 */
.scroll-container:hover::-webkit-scrollbar,
.scroll-container:focus::-webkit-scrollbar,
.scroll-container:active::-webkit-scrollbar {
  opacity: 1;
}

进阶：完全复刻Mac原生滚动效果（需一点点JS） #

纯CSS没法检测容器是不是正在滚动（目前没有::-webkit-scrollbar:scrolling这种伪类），如果想要滚动时自动显示，停止滚动后自动隐藏的完全原生Mac效果，就得加几行JavaScript辅助：

const scrollContainer = document.querySelector('.scroll-container');
let hideScrollbarTimer;

scrollContainer.addEventListener('scroll', () => {
  // 滚动时给容器加个类，用来触发CSS显示滚动条
  scrollContainer.classList.add('is-scrolling');
  // 清除之前的定时器，避免重复触发
  clearTimeout(hideScrollbarTimer);
  // 停止滚动1秒后，移除类让滚动条隐藏
  hideScrollbarTimer = setTimeout(() => {
    scrollContainer.classList.remove('is-scrolling');
  }, 1000);
});

然后对应补充CSS：

/* 滚动时显示滚动条 */
.scroll-container.is-scrolling::-webkit-scrollbar {
  opacity: 1;
}

这样就和MacBook的原生滚动条效果几乎一模一样了！

小提醒 #

• 这些WebKit的滚动条样式只在Chrome、Safari、Edge Chromium这类WebKit内核浏览器生效
• 如果要兼容Firefox，用scrollbar-width配合过渡也能实现类似效果，但定制程度不如WebKit
• 你可以调整::-webkit-scrollbar的width、滑块的border-radius和background-color，来匹配自己的设计风格

内容的提问来源于stack exchange，提问作者Sergey