Master Modern Scrolling: CSS & JavaScript Techniques for Smooth, Accessible Web Experiences

Introduction

Scrolling is essential for most web pages, but delivering a smooth, performant, and design‑consistent experience across browsers remains challenging. The article surveys modern CSS and JavaScript capabilities that replace older, fragile scroll hacks.

Scrollbar Disappearance

Over the past three decades scrollbars have evolved from always‑visible UI elements to auto‑hiding components, especially on macOS where they appear only during scroll. This reduces layout calculations but creates cross‑platform inconsistencies.

Hiding Scrollbars for Modals

A common pattern is to prevent the page behind a modal from scrolling. The naïve approach uses body { overflow: hidden; }, which causes a noticeable layout shift when the scrollbar disappears.

body {
  overflow: hidden;
}

To avoid the shift, calculate the scrollbar width and add an equivalent right‑margin to the html element when the modal opens.

const outer = document.createElement('div');
const inner = document.createElement('div');
outer.style.overflow = 'scroll';
document.body.appendChild(outer);
outer.appendChild(inner);
const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
document.body.removeChild(outer);
// Apply the width as a margin or padding to keep layout stable

Pure‑CSS Scrollbar Hiding

If the visual scrollbar is not required, CSS can hide it while keeping scrolling functional. The rule works in WebKit‑based browsers: html::-webkit-scrollbar { display: none; } For IE/Edge the legacy -ms-overflow-style: none; is needed, though Firefox still shows the scrollbar.

Custom Scrollbars for Aesthetic Control

Designers often replace native scrollbars with fully custom ones. In older IE versions only color could be changed: body { scrollbar-face-color: blue; } WebKit provides richer styling via vendor‑prefixed pseudo‑elements:

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

These rules are supported by Chrome, Safari, Opera, and many mobile browsers, but lack a formal standard.

Smooth Scrolling

Anchored navigation can be animated using the new Element.scrollIntoView({ behavior: 'smooth' }) API, which is currently supported in Chrome, Firefox, and Opera. elem.scrollIntoView({ behavior: 'smooth' }); A newer CSS property, still a draft, enables smooth scrolling globally:

html { scroll-behavior: smooth; }

Sticky Positioning

Instead of calculating positions with JavaScript, the position: sticky rule lets the browser keep an element fixed after scrolling past a threshold.

.element {
  position: sticky;
  top: 50px;
}

Throttling Scroll Events

Scroll events fire at a high frequency, potentially harming performance. A simple throttle wrapper limits execution:

function throttle(action, wait = 1000) {
  let last = 0;
  return function() {
    const now = Date.now();
    if (now - last >= wait) {
      action.apply(this, arguments);
      last = now;
    }
  };
}
window.addEventListener('scroll', throttle(() => {
  const scrollTop = window.scrollY;
  // do something with scrollTop
}, 200));

Lodash’s _.throttle offers a ready‑made alternative.

Viewport Detection

Checking whether an element is in the viewport with getBoundingClientRect() triggers layout reflows on every scroll. The Intersection Observer API solves this efficiently.

const observer = new IntersectionObserver(callback, options);
observer.observe(element);

Overscroll Control

When a scrollable element reaches its edge, browsers may propagate the scroll to the page, causing “overscroll”. The CSS overscroll-behavior property can contain this: .element { overscroll-behavior: contain; } IE/Edge use the older -ms-overflow-style: -ms-scroll-chaining, but modern browsers are converging on the standard property.

Touch‑Device Scrolling

Inertial scrolling is native on iOS, but inner elements often lose momentum. A WebKit‑only hack restores it: .element { -webkit-overflow-scrolling: touch; } Passive event listeners ( { passive: true }) inform the browser that preventDefault() will not be called, improving scroll performance on touch devices.

Conclusion

Relying on JavaScript for cross‑browser scroll behavior is increasingly unnecessary as browsers adopt native CSS and DOM APIs. Progressive enhancement—starting with universally supported minimal UX and layering modern features where available—yields the most maintainable and performant solutions.