修复 chrome 浏览器滚动条占位问题

众所周知 chrome 浏览器的滚动条很丑，且在出现时会将容器的宽度占据一部分，这在使用 vw 单位进行布局的响应式开发中还会影响页面布局。

一般情况下会将 chrome 浏览器的滚动条进行美化，方法如下：

// 解决chrome浏览器下滚动条挤压视图问题
:root {
  overflow-y: overlay; // 可以让chrome浏览器滚动条不占位，mac 的 safari 不支持
}
// 美化滚动条
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  border: 2px solid white;
  background-color: rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
::-webkit-scrollbar-thumb:window-inactive {
  background-color: rgba(0, 0, 0, 0.2);
}

浏览器兼容性

上述美化方案在 chrome 下有效，但实测在 mac 的 safari 浏览器中，滚动条依旧占位。如果要兼容 mac 的话，需要单独处理，以下是对 vue 应用的处理方式：

/** 通过 js 判断浏览器在根元素上添加对应的类名
if (navigator.userAgent.match(/(Mac\sOS)\sX\s([\d_]+)/)) {
  document.documentElement.classList.add('macOS')
}
 */
.macOS {
  // 以下代码为了兼容 mac 上的 safari
  body {
    overflow-x: hidden;
  }
  #app {
    width: 100vw;
  }
}

相关参考文档

https://blog.csdn.net/mini_1251861209/article/details/125000023