How do I create this horizontal scroll while stopping the user from scrolling pass?
I found a cool website https://familyindustrieslive.com/ and while looking scrolling through it when I get to the "The Experience" it stops me from scrolling and it horizontal scrolls before I'm allow to scroll down more. How do it do this?! This is COOL!!!!
Adrian
familyindustrieslive.com
Family Industries Live - Live Printing Experts
On-site customization and gifting featuring live screen printing, live sublimation, live embroidery, live heat press, live laser engraving, hand jet printing, and virtual events customizations - Get a Quote
3 Replies
Heya! If I were gonna do it I would make a container with a height equal to a few times the window height, make the grid of cards position sticky at the top, then css translate the grid based on a JS calculation that takes the scroll distance from the top of the component to the end into account!
you could have an "mousewheel" evenlistener on that section. prevent the default scroll and increase the scrollLeft position of that element by the event.deltaY
but a library like gsap makes it a lot easier, it will take care of all edge cases and helps with different input devises (mouse, pointer, handgestures, etc..