I’ve had to do many a scroll hijacks in my life and boy have I hated myself after each time. I know I’m torturing the users by completely changing their regular browsing flow.

When again such a moment came when I had to put my torture hat on, I got an idea for a totally new way of achieving a similar effect, without actually hijacking the scroll. With this the user will feel the same scroll speed as with regular websites.

The original need was actually to have both regular content and scroll hijacked content mixed together. That’s why this demo has regular content above and below it.

The original blueprints of the technique circa 1812

Scrolling to a slide programmatically

Since it’s using the default scroll, to scroll to a specific slide you just need to use the native scrollTo method. Calculate how far down a specific slide (or rather it’s “hole” placeholder) is in the document and scroll to there.

Before using

I’ve used this technique once in production, but we had to do some fine tuning to the code here and there. You would most likely need to clean up the code a bit, but generally it should work as is. Figuring out how to create the empty spaces and move the content to a slider is something you’d have to figure out in your CMS.