Back to Snippets

Smooth Scroll Behavior

css
CSS

Enable smooth scrolling across your entire website with CSS.

Code

1/* Enable smooth scrolling globally */
2html {
3scroll-behavior: smooth;
4}
5
6/* Respect user preferences for reduced motion */
7@media (prefers-reduced-motion: reduce) {
8html {
9scroll-behavior: auto;
10}
11}
12
13/* Custom scrollbar styling */
14::-webkit-scrollbar {
15width: 8px;
16}
17
18::-webkit-scrollbar-track {
19background: #f1f1f1;
20border-radius: 4px;
21}
22
23::-webkit-scrollbar-thumb {
24background: #888;
25border-radius: 4px;
26}
27
28::-webkit-scrollbar-thumb:hover {
29background: #555;
30}
31
32/* Firefox scrollbar */
33* {
34scrollbar-width: thin;
35scrollbar-color: #888 #f1f1f1;
36}

Details

Language

css

Category

CSS