Fixed nav menu with scrolling overflow

[MichaelHatherly]

This appears to work fine (no focus problems) on Firefox and Chrome on Linux — would probably be good to see whether it has any serious problems on other platforms.

Also replace the box-shadow with a simple solid line since the combination of scroll bar and shadow looked a bit weird to me.

[mortenpi]

This is basically the one I was playing around with. I still see some focus issues sometimes on Firefox (Linux) when moving the mouse between them. Safari was more problematic, I believe, but I can't test it myself. Perhaps @MikeInnes would be willing to give it a try (I put a demo up)?

But I guess there's no better way than relying on the browsers' native scrolling, unless we want to go with MkDocs Material type scrolling, where the menu and the page scroll together partially (js based as far as I can tell).

If we do go with this, then the shadow should probably be dropped from nav.toc ul.internal too, I think. A shame though that we lose it also when the menu is short enough that there is no scrollbar.

We could also consider integrating SimpleBar.js (demo here) or something similar to (hopefully) get nice consistent scrollbars across browsers.

[cormullion]

@mortenpi First quick look appears to work without issues for me (Safari v10.0, macOS Sierra).

[MichaelHatherly]

I still see some focus issues sometimes on Firefox (Linux) when moving the mouse between them.

Very odd. Have you perhaps got any extensions that could be messing with things? What exactly does the focus problem look like, could you make a screencast of it if you've got the time?

where the menu and the page scroll together partially (js based as far as I can tell).

I'd prefer to avoid a js solution for something that really should just work out of the box if possible.

If we do go with this, then the shadow should probably be dropped from nav.toc ul.internal too, I think. A shame though that we lose it also when the menu is short enough that there is no scrollbar.

I'm just going to put the shadow back and let everyone else decide whether it looks fine. It's probably just my GTK theme whose scroll bars make it look slightly odd of Firefox, on Chromium they just hide the entire shadow anyway so kind of avoids the problem.

We could also consider integrating SimpleBar.js (demo here) or something similar to (hopefully) get nice consistent scrollbars across browsers.

Is that a js-free solution? Also, additional deps just for scrolling is a bit much I think.

[cormullion]

I tried it on an iPad. Scrolling the left pane is difficult because a touch acts as a click. It might be a common issue when doing web sites for iOS devices, so solutions may be well known.

[mortenpi]

What exactly does the focus problem look like

When I move the mouse from the page to the scrollbar as I am scrolling the page the focus doesn't switch. And even after the scrolling motion has stopped and I wait a bit it often still doesn't switch (as long as I am keeping the mouse more or less still).

It seems that the issue is because the box of the whole page sort of contains the navigation box. If I put the scrollbars on the article element instead (which is parallel to the nav) then the focus switches without issues.

Also, additional deps just for scrolling is a bit much I think.

Agreed. And SimpleBars would be js too.

About the shadow -- interestingly enough, it seems that in my case, in both Chrome and Firefox, the shadow is hidden under the scrollbar, except the .internal one in Chrome. But the scrollbars are not handled in a very uniform manner, unfortunately.

Scrolling the left pane is difficult because a touch acts as a click.

Not sure what to do with that, and can't test it either. On Android scrolling seems to get priority, so it's not an issue there.

[MichaelHatherly]

When I move the mouse from the page to the scrollbar...

Thanks for the description. I've been trying to recreate it without any luck, very weird...

@cormullion, thanks for checking it out as well.

[mortenpi]

When I move the mouse from the page to the scrollbar...

I meant sidebar, not scrollbar. But the behavior is actually same on the scrollbar. But I guess it could also be related to gdm/gnome-shell.

In any case, the issue is actually minor (and won't affect me on Chrome anyway 😆), so maybe we should go ahead with it and revert/improve later, if need be? Or should we try to get more feedback?

[MichaelHatherly]

so maybe we should go ahead with it and revert/improve later, if need be? Or should we try to get more feedback?

Yeah, lets just go with this for now.