How do I customize the scrollbar on Squarespace?

WebKit-based browsers (Chrome, Safari, Edge) support custom scrollbar styling via ::-webkit-scrollbar pseudo-elements. Firefox uses scrollbar-width and scrollbar-color properties.

Create a slim, branded scrollbar by reducing the width and matching the thumb color to your primary brand color. Include both WebKit and Firefox syntax for cross-browser support.

/* WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}