html 自定义浏览器滚动条的样式，js修改滚动条才能兼容各个浏览器

你可以使用 CSS 和 JavaScript 来自定义浏览器滚动条的样式并实现跨浏览器兼容性。

首先，通过 CSS 的 `::-webkit-scrollbar` 伪类选择器和相关属性，可以自定义 WebKit 内核浏览器（如 Chrome、Safari）的滚动条样式。例如：

/* WebKit 内核浏览器 */
::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 滚动条背景颜色 */
}

::-webkit-scrollbar-thumb {
  background-color: #888; /* 滚动条滑块颜色 */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* 滚动条滑块悬停时颜色 */
}

然后，对于非 WebKit 内核浏览器（如 Firefox、Edge），你可以使用 JavaScript 来修改滚动条的样式。例如：

// 非 WebKit 内核浏览器
const scrollbarStyle = `
  width: 8px;
  background-color: #f1f1f1;
`;

const scrollbarThumbStyle = `
  background-color: #888;
`;

const scrollbarThumbHoverStyle = `
  background-color: #555;
`;

document.documentElement.style.setProperty('--scrollbar-style', scrollbarStyle);
document.documentElement.style.setProperty('--scrollbar-thumb-style', scrollbarThumbStyle);
document.documentElement.style.setProperty('--scrollbar-thumb-hover-style', scrollbarThumbHoverStyle);

然后，在 CSS 中使用自定义属性来设置滚动条样式，这样可以保持代码的可维护性：

/* 兼容所有浏览器 */
/* 滚动条样式 */
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb-style) var(--scrollbar-style);

/* 滚动条滑块样式 */
&::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-style);
}

&::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover-style);
}

这样，你就可以通过 CSS 和 JavaScript 来自定义浏览器滚动条的样式，并且实现跨浏览器兼容性。