Stylizing the Scrollbar in Next.js

The default appearance of the scrollbar in a browser can be quite dull and boring. In this article, we will look at how we can stylize the scrollbar to match our website's theme using Next.js and CSS.

Importing the styles

To import the styles for the scrollbar, we will create a file in the styles/globals.css directory. This file will contain all of our global styles, including the styles for the scrollbar.

Defining the color variables

We are using CSS variables to define the colors of the scrollbar. The CSS variables are defined in the :root block.

:root {
  --primary: #f1f1f1;
  --secondary: rgba(31, 209, 253, 0.4);
  --tertiary: rgba(31, 209, 253, 0.6);
}

Defining the styles

Let's start by defining the styles for Firefox.

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--secondary) var(--primary);
}

The scrollbar-width property specifies the width of the scrollbar. In this case, we are using the value thin to make the scrollbar as thin as possible. The scrollbar-color property sets the color of the scrollbar and its thumb.

Next, we will define the styles for Chrome, Edge, and Safari.

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 17px;
}

*::-webkit-scrollbar-track {
  background: var(--primary);
  border-radius: 5px;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--secondary);
  border-radius: 14px;
  border: 3px solid var(--primary);
}

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

The width property sets the width of the scrollbar. In this case, we are using 17px. The *::-webkit-scrollbar-track defines the styles for the track of the scrollbar. The background color is set using the --primary variable. The border-radius property gives the track a rounded border.

The *::-webkit-scrollbar-thumb defines the styles for the thumb of the scrollbar. The background color is set using the --secondary variable. The border-radius property gives the thumb a rounded border, and the border property adds a border to the thumb.

Finally, the ::-webkit-scrollbar-thumb:hover defines the styles for the thumb when it is hovered over. In this case, the background color is set to --tertiary.

Live Demo:

Final thoughts

And that's it! By following these steps, we can easily stylize the scrollbar in Next.js. You can further customize the styles to match your website's theme. The possibilities are endless!