spacebar doesn’t scroll the page after clicking on rendered cell output

For better or worse the spacebar has been the standard keyboard shortcut for scrolling webpages for as long as I’ve been using the web.

When viewing an observable notebook, it starts out working as expected, but if I click on (or select text in, etc.) the rendered output of a cell (which might just contain paragraphs of text, nothing fancy), the spacebar stops working for scrolling.

If I click to show and then hide a cell’s code box, the spacebar starts to work again, but as soon as I click into the content area it breaks.

I can’t imagine any reason to desire this behavior, and it’s pretty annoying, so I am guessing it is a bug.

Unfortunately this is not something we can control: it is an artifact of how Observable sandboxes the notebook in a (tall) iframe. Ideally, this is something that browser vendors would fix instead of ignoring the spacebar.

You can workaround this issue by using page up and page down instead of space and shift-space; these work regardless of focus. Alternatively you can click the right margin to focus the parent frame. We could possibly workaround this in JavaScript, but given the complexities of re-implementing native scrolling in JavaScript, that could cause other problems.