Mastering CSS Scroll: 7 Essential Properties and How to Use Them

Scroll Generation

overflow: scroll | auto;

Smooth Scrolling

scroll-behavior: auto | smooth;

Scroll Snap

scroll-snap-type: none | x | y | block | inline | both | mandatory | proximity;

scroll-snap-stop: normal | always;

scroll-snap-padding / scroll-padding: auto | length;

scroll-snap-align: none | start | end | center;

scroll-margin / scroll-margin: auto | length;

Detailed explanations can be found at the referenced articles: https://www.zhangxinxu.com/wordpress/2018/10/scroll-behavior-scrollintoview-%E5%B9%B3%E6%BB%91%E6%BB%9A%E5%8A%A8/ and https://www.zhangxinxu.com/wordpress/2018/11/know-css-scroll-snap/.

Scroll Boundary

overscroll-behavior: auto | contain | none;

-ms-scroll-chaining: chained | none; /* IE 10+ */

Reference: https://www.w3cplus.com/css/overscroll-behavior.html.

Scroll Hiding

.wrapper::-webkit-scrollbar { display: none; }

.wrapper { -ms-overflow-style: none; } /* IE 10+ */

Scroll Inertia

-webkit-overflow-scrolling: auto | touch; /* iOS Safari 5+ */

Scroll Appearance

scrollbar-width: auto | thin | none | length;

scrollbar-color: auto | dark | light | color {2 thumb track};

Specification draft: https://www.w3.org/TR/2018/WD-css-scrollbars-1-20180925/.

WebKit Proprietary Pseudo‑Elements

::-webkit-scrollbar { /* whole scrollbar */ }

::-webkit-scrollbar-button { /* up/down arrows */ }

::-webkit-scrollbar-track { /* track */ }

::-webkit-scrollbar-track-piece { /* track without thumb */ }

::-webkit-scrollbar-thumb { /* draggable thumb */ }

::-webkit-scrollbar-corner { /* corner where vertical & horizontal bars meet */ }

Example implementation:

IE Proprietary Properties

scrollbar-face-color: /* color of the scrollbar's protruding part */

scrollbar-highlight-color: /* color of the empty part */

scrollbar-shadow-color: /* 3D shadow color */

scrollbar-3dlight-color: /* light edge color */

scrollbar-arrow-color: /* arrow color */

scrollbar-track-color: /* background color */

scrollbar-darkshadow-color: /* strong shadow */

scrollbar-base-color: /* basic color */

Visual reference:

Additional resources: CodePen example https://codepen.io/airen/pen/OZEpMj and scrollbar generator tool https://darrylhuffman.com/sites/Scrollbar-gen/.