Why is my website not scrolling down: 3 causes

The visitor scrolls, and the first screen stays put. The page below it is there, and the scroll bar may even be drawn, but the wheel and the finger never move the document. Often a panel opened once and asked the page to stop scrolling behind it, then closed without releasing that request. Or a full-screen layer from an intro animation still covers the screen and swallows every scroll gesture. The owner rarely meets either case, because a reload clears a lock set in script and the owner reloads before every test.

• Press the arrow keys or Page Down. If the page moves, something is cancelling the wheel and touch.
• In the Console, run getComputedStyle(document.body).overflow and check whether it says hidden with no panel open.
• Compare document.documentElement.scrollHeight with window.innerHeight. Equal numbers mean the page has nothing below the first screen to scroll to.
• Look for a fixed element that covers the whole viewport and stays there after its panel closes.
• Scroll with the pointer over each box on the page, to see whether one box takes the scroll and holds it.

A cookie panel, a sign-up pop-up or a mobile menu often sets overflow hidden on the html or body element while it is open. That style is meant to last only while the panel is open. Many panels remove it on the close button and miss the other ways out, such as a tap on the dark background or the browser back button. The lock then stays for the rest of the visit, and the document cannot scroll. To check, run getComputedStyle on document.body in the Console and read the overflow value. Hidden while no panel is open means a lock is still on.

Press the arrow keys or Page Down on the page. If the page moves, the document can scroll, and something is cancelling wheel and touch events. Scripts do this when they call preventDefault on those events, often to stop a carousel from moving the page with it. A full-screen layer from an intro animation can do the same by sitting over the page. Keys skip those handlers, so they still work. If the keys do nothing either, the document has no extra height or a lock sits on it, and the scrollHeight check in the Console settles which.

A scrollable box with a fixed height, such as a review list, a chat panel or a table, takes the wheel when the pointer is over it. The page then scrolls only after the box reaches its end, and on a phone a finger may move the box and nothing else. Visitors read this as the page being stuck. Check it by scrolling with the pointer over the box and then over the bare background. If the page moves when the pointer is on the background but not on the box, the box is capturing the scroll, and its height or its overflow setting needs a fix.

A newer cookie tool, a sign-up pop-up or a menu added in the next release can set the same lock on the body, and a new carousel can cancel wheel events. Rerun the same phone visitor after each change, and make sure the scroll reaches the price at the bottom of the guide. With paid credits, visitors can reach a page behind a site password, so the check can run on each preview deploy before the page goes live.