Why There Is a Scrollbar Down the Side of Your Screenshot
A grey stripe along the right edge, sometimes with the thumb visible partway down. The capture photographed the browser window, and the scrollbar is part of the window.
·4 min read
A grey stripe runs down the right-hand edge of your screenshot. Sometimes there is a darker block partway along it, sitting at whatever position the page happened to be scrolled to.
It looks like a mistake in the image. It is the browser window, faithfully recorded.
What is actually happening
A screenshot of a web page is taken by photographing the visible area of the tab. The scrollbar is drawn inside that area, on the right, so it is in the photograph for the same reason the page is.
On a full-page capture it gets stranger, because the page is photographed in several screens and stitched. Each screen carries its own scrollbar, and each was taken at a different scroll position, so the thumb — the draggable block — is somewhere different in each one. Joined together, you can end up with a dotted trail of thumbs down the edge of the image rather than one continuous bar.
Why some screenshots have it and others do not
Whether a scrollbar takes up space at all depends on the machine. Macs hide scrollbars until you scroll and then draw them on top of the content, so a capture on a Mac with a trackpad usually has no stripe. Windows and Linux reserve a permanent strip for it, so the page is genuinely narrower than the window and the stripe is always there.
Sites can also style their own scrollbars, which is why one page gives you a thin dark line and the next a wide grey one.
What you can do about it
- Crop it off. It is a strip about fifteen pixels wide at the right edge. Any image editor removes it in one action, and the result is indistinguishable from a capture that never had one.
- Use a tool that crops it for you. The strip is in a predictable place and a predictable width, so this is a thing capture tools can reasonably handle before you ever see the file.
- Use Chrome’s own device toolbar. Open developer tools, switch on the device toolbar, and the page renders in a frame with an overlay scrollbar instead of a reserved one. Useful if you are already in there; heavy-handed if you are not.
The one that is not worth doing
There is a CSS trick, often suggested, for hiding scrollbars by injecting a style rule into the page before capturing. It works, and on many sites it also changes the layout — removing the reserved strip makes the page fifteen pixels wider, and anything centred or measured against the window shifts. You get a screenshot without a scrollbar that is not quite a screenshot of what you were looking at. Cropping afterwards is both simpler and more faithful.
What PageStill does
It crops the scrollbar off the right edge when it stitches, so the strip is not in the file you get. Nothing about the page is changed to achieve it — the crop happens to the image afterwards, so the layout in the picture is the layout you were looking at.
Something out of date or wrong here? Device specs and interface details shift with every release. Tell me and I'll fix it.
Related reading
- Why the Header Repeats Down Your ScreenshotThe menu bar that follows you down the page turns up once per screen in a stitched screenshot. Here is the mechanism, how to recognize it, and what stops it.
- Why Only Part of the Page Ended Up in Your ScreenshotThe window did not scroll — a box inside it did. Full-page capture works on the page, and a panel with its own scrollbar is not the page. Here is how to tell, and what actually works.
- How to Screenshot an Entire Webpage in ChromeFour ways to capture a whole page top to bottom, including the one already built into Chrome that most people never find. What each is good at, and where each one breaks.