The honest guide. Page under construction

Scroll
jacking

Scrolljacking is when a website overrides the browser's native scrolling and decides for itself what your scroll does next: stepping through sections, driving an animation, or holding you in place until a sequence finishes. It is not a bug, and there is no search penalty for it. It is a technique, and like most techniques it is mostly used badly. Here is what it actually does, what it really costs, and the six rules that separate the two.

Start here

Scroll,
hijacked.

The mechanism

What it actually is.

A normal page lets the browser handle scrolling: you push, it moves, and the amount it moves is yours to decide. A scrolljacked page listens for that input first. It cancels the browser's response and spends your gesture on something else: advancing one section, scrubbing a timeline, pinning a panel in place until an animation finishes.

That is the whole trick, and it is neutral. Everything people dislike about scrolljacking comes from what happens next: whether the page gives your controls back, and whether anything of value was left outside the document while it performed. The longer definition is in the blog.

How a scrolljacked page handles your scroll Three stacked panels joined by downward arrows: your input from a wheel, trackpad or arrow keys is intercepted by the page, which then decides how far the view moves. YOUR INPUT wheel, trackpad, arrow keys INTERCEPTED the page listens first THE PAGE DECIDES animation drives position

Say the quiet part

The risks, stated plainly.

Four things go wrong, and only the first one is about taste. Control: the reader loses a behavior they have trusted for twenty years, and gets motion they cannot predict in exchange. One URL: five topics on a single page means one title tag about nothing, and nothing anyone can deep-link, the real reason scrolljacked sites rank badly, which the SEO post takes apart properly.

Invisible content: anything a script injects on scroll may never be injected for a crawler or a screen reader. Payload: a full-page-scroll plugin and an animation library are main-thread work on exactly the path Core Web Vitals measures. Every one of these is optional. None of them is inherent to the technique.

Four risks of building scrolljacking badly Four crossed-out panels: control is taken from the reader, one URL leaves nothing to rank, hidden content is never crawled, and the payload blocks the main thread. CONTROL taken from you ONE URL nothing to rank HIDDEN CONTENT never crawled PAYLOAD blocks the main thread

The playbook

Six rules, and it costs the reader Nothing

Six rules for using scrolljacking responsibly REAL URLS HTML FIRST REDUCED MOTION KEYBOARD CSS, NOT JS OPT-IN Every screen is a real page. In the document before scripts. Honored all the way down. Tab, arrows, Home, End. Animate off the main thread. Visible, and remembered.

Miss one and you have built the version everybody complains about.

The upside

What it's genuinely good for.

One idea per screen is a real editorial constraint, and constraints are why the format works: nothing competes for attention, so the thing you came to say actually gets said. Pacing becomes something you design rather than something the reader's trackpad decides. And when every screen is its own page, the structure that makes the story readable is the same structure a crawler rewards.

What it will not do is move your rankings on its own. Anybody promising ranking outcomes from an animation technique is selling something. It earns its place when the content is genuinely sequential (a process, a comparison, an argument built one beat at a time) and nowhere else.

Four things responsible scrolljacking gives you Four ticked panels: one idea per screen, pacing you design, real URLs for every screen, and motion the reader can decline. ONE IDEA per screen, nothing competes PACING designed, not guessed REAL URLS every screen indexed OPT-IN MOTION offered, not imposed

The exception

When the discomfort is the point.

Everything above is the case for restraint, and it holds almost everywhere. Here is where it stops holding.

Some businesses are not selling information. They are selling an experience, and an advertisement for an experience is not supposed to be comfortable. It is supposed to hand you a sample of the feeling you are being asked to pay for. A haunted attraction is the clearest case there is: a page that takes the wheel, holds you at a door and makes you walk through it is not failing at usability. It is the product, demonstrated, before anyone commits a penny.

There is a wider version of this. The businesses that get to break the rules are the ones whose customers arrive already convinced, the same way a genuinely established name does not have to fight for a search term, because people type the name. Experience businesses are in that position far more often than they realise. Nobody researches four haunted houses on a comparison chart; they pick the one that made them feel something. Comfort is not what is being shopped for, so a site optimised for comfort is optimised for the wrong thing.

That is where the strength of this technique actually lives, and it is narrow on purpose. Note what does not get suspended along with the comfort: real URLs, real text a crawler can read, and a still, readable page for anyone whose device asks for reduced motion. The technique gets to be full-strength. It does not get to be an excuse.

The worked example: a horror theme

In practice

How we use it here.

So at this point you're probably all like, "This guy's a hypocrite", and for now, you're right! I wanted to perfect this technique and I gave myself a challenge. Make a scrolljacked website with none of the downfall that it normally comes with it.

So I actually completed the slide deck version, and you can select it right now from that nifty nav in the top right. Personally, I think it's an improvement over most of the issues I'd normally face like SEO, UX, ADA, and other acronyms!...I did have to break it for a while so I could get the fully, 100% crazy, proven poor for UX/UI in most cases version up as well because - as a UX/UI developer - I can't leave a tool on the table. I also happen to love it and seeing how it's usually used is like watching your old friend fall in with a bad crowd.

I'm working hard here to get the site 100% done, with 100% control left with the user as a selection and as standard, but I had to take on the challenges first. Anyway it's late and I'll spell chech this tomorrow. (get it?)

See the full method Constructive feedback is always welcome

ScrolljackingFAQs

What is scrolljacking?

Scrolljacking is when a website overrides the browser's native scrolling and uses your scroll input to drive its own behavior instead: advancing a section, scrubbing an animation, or pinning a panel. It is also called scroll hijacking. The full definition is in the blog.

Is scrolljacking bad for SEO?

There is no scrolljacking penalty. What hurts is what usually comes with it: one URL for everything, content injected by script, and a heavy animation library. Keep real pages and real HTML and the technique costs you nothing; see the SEO post.

Can a scrolljacking site be accessible?

Yes, though most are not: in the usual build keyboard navigation breaks and reduced-motion settings are ignored. Both are fixable, by leaving the keyboard alone and standing down completely when the OS asks. Is scrolljacking bad for accessibility? walks through it, ADA yardstick included.

When should you use scrolljacking?

When the content is genuinely sequential (a process, a comparison, an argument built one beat at a time) and the reader gains something from seeing one idea at a time. For a page someone came to skim or search, don't.

How do you turn scrolljacking off?

On a site built properly, you shouldn't have to: turning on reduced motion in your operating system is enough, and a visible control should offer the same choice. On this site both work, and the answer is remembered between visits.

Is scrolljacking the same as scroll-driven animation?

No. A scroll-driven animation is tied to where you already are on the page; you stay in control of the scrollbar. Scrolljacking takes the input itself and decides how far the page moves. The first is a visual effect; the second is a navigation change.

That's the theory

Now the
practice.

I wrote this page because the argument only ever seems to have two sides: scrolljacking is either a crime or a personality. It is neither. It is a technique with a short list of rules, and this site follows them in public, which is the only kind of proof worth much. The version with my name on it is the method; the themes are it running live. The blog shows the work, the FAQ handles the rest, I'm here, and home is where the tour starts. Building something that should move like this? Tell me about it.

The Better Website

The Better Website is a one-person web design studio in Raleigh, NC, serving the Triangle and clients nationwide. Every site is hand-coded in plain HTML, CSS and JavaScript — not built on WordPress, a page builder or a CMS.