apolineaire
4/15/2018 - 6:57 PM

Multi-scrollbar tricks

/*== SCROLL THINGS == notably from https://evilmartians.com/chronicles/scroll-to-the-future-modern-javascript-css-scrolling-implementations */
/* Change scrollbar size or color in -webkit navigator */

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 4px;
}

/* Change the "smoothness" of the scroll WITHOUT JS – still not implemanted widely but usable in Chrome, Firefox, and Opera*/

html {
  scroll-behavior: smooth;
}

/* When you have to deal with multiple scrolls, for instance with a pop-up inside a windows, you can prevent the overscroll with CSS */

.element {
  overscroll-behavior: contain;
}
/* MS & Edge are handling it with -ms-scroll-chaining and overscroll-behavior is on its way */