4 JavaScript Horizontal Scroll Examples
This collection is your complete guide to creating horizontal scroll with JavaScript, from basic mechanics to complex interactive narratives. We start with the classic technique of hijacking the wheel event and converting its deltaY value into a change in the container’s scrollLeft. To enhance UX, we add the popular “drag-to-scroll” pattern using mouse events. For truly immersive effects, you’ll find advanced examples with GSAP and ScrollTrigger that let you “pin” sections and create entire animation timelines tied to the scroll progress. Special attention is paid to performance, using the Intersection Observer API to animate content only when it’s in the viewport.
Last updated:
Intersection Observer Example
A horizontal scrolling gallery where the background color smoothly transitions to match the current image, triggered by the Intersection Observer API.
CSS Scroll-Driven Content Wave
A fluid, tactile selection interface where elements “live” and react to scroll, creating a “fisheye” or lens effect.
Scroll-Driven Content Wave #2
A horizontal scroll interface featuring a “lens” effect powered by CSS Scroll-Driven Animations (animation-timeline: view(inline)).
Horizontal Scroll Section with GSAP and Locomotive Scroll
Experience a classic “pinned” horizontal scroll effect, where a vertical scroll action is converted into horizontal movement. GSAP’s pin: true property freezes the section in place, while a tween animates the x property of the inner container, creating a cinematic, side-scrolling gallery.