如何更改Nextjs中的默认滚动条颜色？

Question

我见过网站使用默认的滚动条样式，并且仅通过暗/亮模式按钮更改其颜色。例如，如果您在 Chrome 和 Firefox 中访问 tailwindcss.com 或 https://developer.mozilla.org/（用于比较），您可以看到应用了默认滚动条，其样式根据您使用的浏览器而变化。正在使用，它通过暗/亮按钮改变颜色。你可以注意到这些网站的箭头、轨道和拇指都使用相同的颜色，所以我想它一定是一个内置函数。

我尝试用简单的::webkit-scrollbar、track和thumb来改变它的风格。但正如您可能知道的，它删除了默认滚动条。

Answer 1

您在 https://developer.mozilla.org/ 或 https://tailwindcss.com/ 上看到的内容是深色 CSS 主题的浏览器默认内容。这就是为什么它们看起来相同，它不是自定义滚动条，只是特定浏览器的默认滚动条。

它由

color-scheme

css 属性控制，在这种情况下，它是根

color-scheme: dark;

元素上的

html

。请注意，此属性还会更改其他内容，例如文本颜色、按钮颜色和其他本机元素的颜色。因此，如果您只想将其应用于滚动条，那么使用

::webkit-scrollbar

等手动自定义它可能会更好。

Answer 2

您尝试过 w3school 教程中描述的方法吗？这是链接：https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp 它对我的情况有效。

Answer 3

就个人而言，所有 Vanilla JavaScript 项目：

/*

BROWSER SCROLLBAR KITS

*/

/* CHROME & SAFARI */
html::-webkit-scrollbar {
  width: 8px; 
}

html::-webkit-scrollbar-track {
background-color: transparent;
}

html::-webkit-scrollbar-thumb {
background: var(--wizard-yellow);
border-radius: 8px;
}

html::-webkit-scrollbar-thumb:hover {
  background: var(--wizard-blue);
  border-radius: 10px;
}

html::-webkit-scrollbar-thumb:active {
  background: var(--wizard-mocha);
  border-radius: 10px;
}

/* MOZILLA FIREFOX */
html::-moz-scrollbar {
  width: 8px; 
}

html::-moz-scrollbar-track {
  background-color: transparent;
}

html::-moz-scrollbar-thumb {
  background: var(--wizard-yellow);
  border-radius: 8px;
}

html::-moz-scrollbar-thumb:hover {
  background: var(--wizard-blue);
  border-radius: 10px;
}

html::-moz-scrollbar-thumb:active {
  background: var(--wizard-mocha);
  border-radius: 10px;
}


/* MICROSOFT INTERNET EXPLORER */
html::-ms-scrollbar {
  width: 8px; 
}

html::-ms-scrollbar-track {
background-color: transparent;
}

html::-ms-scrollbar-thumb {
  background: var(--wizard-yellow);
  border-radius: 8px;
}

html::-ms-scrollbar-thumb:hover {
  background: var(--wizard-blue);
  border-radius: 10px;
}

html::-ms-scrollbar-thumb:active {
  background: var(--wizard-mocha);
  border-radius: 10px;
}

/* OPERA */
html::-o-scrollbar {
  width: 8px; 
}

html::-o-scrollbar-track {
background-color: transparent;
}

html::-o-scrollbar-thumb {
background: var(--wizard-yellow);
border-radius: 8px;
}

html::-o-scrollbar-thumb:hover {
  background: var(--wizard-blue);
  border-radius: 10px;
}

html::-o-scrollbar-thumb:active {
  background: var(--wizard-mocha);
  border-radius: 10px;
}

对于 Next.js 项目：

/*

BROWSER SCROLLBAR KITS

*/

/* CHROME & SAFARI */
*::-webkit-scrollbar {
  width: 8px; 
}

*::-webkit-scrollbar-track {
background-color: transparent;
}

*::-webkit-scrollbar-thumb {
background: var(--wizard-yellow);
border-radius: 8px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--wizard-blue);
  border-radius: 10px;
}

*::-webkit-scrollbar-thumb:active {
  background: var(--wizard-navy-blue);
  border-radius: 10px;
}

/* MOZILLA FIREFOX */
*::-moz-scrollbar {
  width: 8px; 
}

*::-moz-scrollbar-track {
  background-color: transparent;
}

*::-moz-scrollbar-thumb {
  background: var(--wizard-yellow);
  border-radius: 8px;
}

*::-moz-scrollbar-thumb:hover {
  background: var(--wizard-blue);
  border-radius: 10px;
}

*::-moz-scrollbar-thumb:active {
  background: var(--wizard-navy-blue);
  border-radius: 10px;
}


/* MICROSOFT INTERNET EXPLORER */
*::-ms-scrollbar {
  width: 8px; 
}

*::-ms-scrollbar-track {
background-color: transparent;
}

*::-ms-scrollbar-thumb {
  background: var(--wizard-yellow);
  border-radius: 8px;
}

*::-ms-scrollbar-thumb:hover {
  background: var(--wizard-blue);
  border-radius: 10px;
}

*::-ms-scrollbar-thumb:active {
  background: var(--wizard-navy-blue);
  border-radius: 10px;
}

/* OPERA */
*::-o-scrollbar {
  width: 8px; 
}

*::-o-scrollbar-track {
background-color: transparent;
}

*::-o-scrollbar-thumb {
background: var(--wizard-yellow);
border-radius: 8px;
}

*::-o-scrollbar-thumb:hover {
  background: var(--wizard-blue);
  border-radius: 10px;
}

*::-o-scrollbar-thumb:active {
  background: var(--wizard-navy-blue);
  border-radius: 10px;
}

您也可以参考这篇文章：[https://dev.to/luckey/stylizing-the-scrollbar-in-nextjs-1o99]