In modern CSS, various effects that previously required complex setups and concepts can now be achieved with one-line enhancements. These modern CSS techniques are widely supported by browsers, and in this article, I'll introduce eight of them that you might not know about.

1. Scroll Chaining

When a scrollable element, such as a dialog in a browser, reaches the end of its scrollable content, the scroll interaction is passed on to the underlying page (i.e., the body element). This is a default behavior known as scroll chaining.

Scroll chaining isn’t limited to dialogs; it can happen with any adjacent scrollable areas, like sidebars with navigation links or chat popups. In the past, we had various tricks to avoid this, but now, thanks to the overscroll-behavior property, it can be easily controlled with a single line of code.

The default value, overscroll-behavior: auto, allows the usual scroll overflow behavior. To isolate scrolling within a container, you can set overscroll-behavior: contain

.messages {
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

Notice that we use overflow: auto instead of overflow: scroll, which only shows a scrollbar when necessary. Additionally, you can use overscroll-behavior: none to prevent the bounce effect that occurs when you scroll beyond the page boundaries. For instance, to prevent Chrome on Android from refreshing the page when scrolling past the top, you can set this on the html element:

html {
  margin: 0;
  overscroll-behavior: none;
}

2. Scrollbar Gutter

As mentioned above, when using overflow: auto, a scrollbar is added when content becomes too long, which can cause layout shifts by taking up space. This can negatively impact text readability.

Subscribe to Premium to read the rest.