Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Problem with navigating with sticky navbar, and scrolling body #151

Closed
abhishiv opened this issue Jan 21, 2019 · 3 comments
Closed

Problem with navigating with sticky navbar, and scrolling body #151

abhishiv opened this issue Jan 21, 2019 · 3 comments

Comments

@abhishiv
Copy link

Hello

Thank you very much for a much needed library/polyfill.

I have a little problem.

Code here: https://output.jsbin.com/celekuh

ezgif-4-11ce399ba2fe

As you can see, once the focus moves to top section in the viewport, pressing up moves the focus to nav, and then pressing up again just scrolls the page. This might be correct according to the spec, but from UX point of view maybe is counter intuitive.

I also tried using --spatial-navigation-contain: contain on container wrapping the sections, however that also doesn't change anything. In this case overflow is applied on body, because otherwise scrolling is very jaggery on touch devices.

Since sticky navbars are a common enough UI pattern, any ideas how I can make it work?
@jihyerish
Copy link
Collaborator

Yes, I aware of this scenario can often happen in the real page.
The reason for this behavior is :
(1) <a tabindex="0" href="/">home</a> is currently focused element.
(2) The up arrow key is pressed.
(3) There is no element upward from the currently focused element.
(4) The container of the currently focused element is document, and it can be scrolled,
so pressing the up arrow key works for scrolling.

Step (3) - (4) is the common behavior in the spatial navigation and also the general rule of the spec.

However, to solve this issue, step (4) may don't occur when the currently focused element is a sticky positioned element or descendant of a sticky positioned element.
This approach is the spec point of view, so the current polyfill need to be updated depending on the changes in the spec.
Thanks for your valuable feedback, and I'll let you know if there is a progress about this!

@abhishiv
Copy link
Author

abhishiv commented Jan 23, 2019 •
edited
Loading

Hey @jihyerish

Many thanks for your reply.

Just to be clear, I meant that in this case when the focus is on the topmost section in the viewport, pressing up should scroll up and move the focus the section just above it instead of moving it to nav, and repeat this on up-key-presses until body has been completely scrolled. Then pressing up can move focus to nav. That I think is more intuitive from UX point of view.

@anawhj
Copy link
Collaborator

anawhj commented Jan 25, 2019

Interesting finding! Two points for your scenario.

  1. --spatial-navigation-contain on the <main> element
    Once you set --spatial-navigation-contain to the <main> element, the descendants of the element have a high priority in terms of getting focus as long as there is one or more visible descendants in the viewing area. In your case, however, the home text inside <nav> element gets the focus because there is no visible descendant target in the <main> element. If you set tabindex="-1" to the <anchor> tag inside <nav> and see the abnormal behavior, you can understand the reason why we should consider the invisible element case.

  2. Scrolling element behavior as a container
    The scrolling element becomes a container by default. When you move focus in a scrolling element, it can step out of the scrolling element only if you reach the start edge or end edge of the scrolling element. In your case, the scrolling element is not <main> element, but <body> element. <section> elements and <nav> element are descendants of the <body> element, so they have the same priority in terms of getting focus.

There are several solution in your case. You can simply put the following CSS properties on the <main> element. main {height: 500px; overflow: auto;}
https://output.jsbin.com/xutoxin (modified app)

You can also elaborate the situation by JS. Welcome more question on it, but I'm just wondering what the use case is using spatial navigation.

@partap partap mentioned this issue Oct 9, 2019
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@abhishiv @jihyerish @anawhj