I want Safari to stop annoying me when I use the space bar to scroll.

January 20, 2015 7:17 PM

Certain kinds of web pages break my browsing habits. I'm cranky and do not wish to change my browsing habits. Is there a way to get these pages to act like I want them to?

There's a web construct that's become popular in recent years. I stopped understanding HTML about fifteen years ago so I don't know what it's called but here's an example, where the content I want to read is "framed" in a header and sidebars. The problem I have is that I'm used to scrolling down on long pages by hitting the space bar, and that doesn't work with content framed like this: it scrolls two or three lines longer than it should, presumably because the calculation of how far to scroll is including the header.

I'm using Safari on a Mac laptop. I'm not interested in changing browsers. Is there a way to either change the scroll calculation, or un-frame the content (maybe a custom stylesheet?)?

posted by bac to Computers & Internet (8 answers total)

To get it working perfectly, i.e. with headers intact and scrolling working as it should, you will generally need to inject js and css into the page with something like greasemonkey. The code will be custom to each site.

Another way to do it is to use a plugin like stylish to strip the header elements. This will be a lot less work, but still needs to be done per site.

Generally site designers seem oblivious to this issue, which is a shame (mathowie, I'm looking at you).
posted by ryanrs at 7:26 PM on January 20, 2015

Use Safari's "Reading Mode", the keys are command-shift-r. It does exactly what you need on that site, and others, too.
posted by bensherman at 7:41 PM on January 20, 2015

I have a script on GitHub that fixes this — perhaps someone enterprising enough could turn it into a greasemonkey script: https://github.com/murtaugh/sticky-pagination-fixer
posted by o2b at 8:14 PM on January 20, 2015

Those drop-down top bar menu things... how do I make them go away? might be helpful.
posted by jaguar at 9:44 PM on January 20, 2015

Generally site designers seem oblivious to this issue, which is a shame (mathowie, I'm looking at you).

When I view Metafilter there's an X on the far right of the floating header thing. Clicking the X makes the sticky header disappear except for a tiny white tab in the far upper right that doesn't get in the way of viewing page content. I don't think this absolves the sticky header's developer of guilt, since many people don't notice the X or aren't tech-savvy enough to get what it does, but it turns an anti-pattern into a design pattern I merely don't prefer.

For the OP's problem (in Chrome), I right-click on the element and select "Inspect Element", then select the entire troublesome DOM element (which is usually a higher-level element than what I clicked), right click and "Delete Node". Problem temporarily solved.
posted by daveliepmann at 12:39 AM on January 21, 2015

Seconding "Reader Mode" in Safari. It gets rid of superfluous UI elements like that, plus it hides ads, removes backgrounds and colunms, and switches the fonts into something actually readable.
posted by monospace at 8:26 AM on January 21, 2015

It's bad trendy web design. Sending a note to the site's feedback may or may not help influence them to have better usability the next time they redo the site.
posted by Candleman at 8:28 AM on January 21, 2015

Thanks! The AdBlock solution in the answer jaguar linked to seems to work well for me. Thanks also for the pointer to reading mode, which isn't quite what I want here but will be useful in other contexts.
posted by bac at 9:20 AM on January 21, 2015