Avoid parent scrolling

Okay, time for a useful scrolling tool to have in the toolbox, especially if you have a smaller area on your page with elements that should be scrolled independently from the rest of the page. However, you might have encountered a frustrating issue where the scroll interaction passes to the parent element once it runs out of elements. But we have this one to the rescue:

article {
  overscroll-behavior: contain;
}

With ‘overscroll-behavior: contain’ scrolling is isolated to the contained element, preventing it from traveling to the parent. This is a nice trick especially for scrollable sidebars on longer pages. But I bet you can come up with more cases where it can come in handy.