After click on more button, page not scrolled to new elements. We need to fix it.

To be more specific, after clicking the load more button, the page stays on the position of the load more button and it is hard to tell that new elements have been inserted in the DOM before the load more button. The patch for this issue (https://git.drupalcode.org/issue/views_infinite_scroll-2856902) restores the previous page scroll position after load more has been clicked so that the page scrolls to the first new element.

CommentFileSizeAuthor
#2 interdiff-2856902-added-scroll-function.txt666 byteshog
#2 2856902-added-scroll-function.patch491 byteshog

Issue fork views_infinite_scroll-2856902

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

HOG created an issue. See original summary.

hog’s picture

hog commented
StatusFileSize
new 2856902-added-scroll-function.patch491 bytes
new interdiff-2856902-added-scroll-function.txt666 bytes
uzlov’s picture

uzlov commented
Status: Active » Needs review

looks ok
need to test

Status: Needs review » Needs work

The last submitted patch, 2: 2856902-added-scroll-function.patch, failed testing.

hog’s picture

hog commented
Status: Needs work » Needs review
sam152’s picture

sam152 commented
Status: Needs review » Postponed (maintainer needs more info)

After click on more button, page not scrolled to new elements

Can you point to some examples of this on the web that indicate this is the defacto expected behavior? I've never seen the behavior of scrolling to the new results in the wild.

t_stallmann made their first commit to this issue’s fork.

t_stallmann’s picture

t_stallmann commented

We're running into what I think is a similar issue to this one, and adding a maybe simpler fix. I have a view with a "load more" button at the bottom; when a user clicks the pager to load more items, those items get inserted into the DOM above the pager node (which has focus), and so the view stays fixed at the bottom of the page. I think this is only an issue when you're using views infinite scroll without the autoscrolling behavior.

The desired behavior is that the user's view should stay centered on the last view item they were able to see, with new content below that they then scroll down to access. This patch does that by just storing the scroll state of the document before new nodes are added, and then restoring it afterwards.

t_stallmann opened merge request !1

hebl’s picture

hebl commented

For anyone landing here trying to improve the accessibility of their infinite scroll, check out comment #4 on this issue page: https://www.drupal.org/project/views_infinite_scroll/issues/3173923

The patch forces keyboard focus onto the first item that is loaded.

t_stallmann closed merge request !1

t_stallmann reopened merge request !1

t_stallmann’s picture

t_stallmann commented

Rerolled my patch to work with v2.0.x.

The patch @HEBL links to solves the accessibility issue, but it still leaves a weird UI experience where the page position jumps. I'm currently applying both patches, which seems to work well.

@Sam152 -- does my previous comment answer your request for more info? Just poking around and one example of a site "in the wild" which has the behavior I'd like to see is https://onemileatatime.com/.

Maybe there could be a setting to choose scroll behavior, with the current behavior as a default?

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented

Is this still an issue with 2.0.x? If yes, please update the version and set the status active again with clear steps or (best) with a test showing what's broken.

2.0.x is the active development branch.

If nobody replies, we should assume this is fixed and close this issue outdated.

Thanks!

t_stallmann’s picture

t_stallmann commented
Version: 8.x-1.x-dev » 2.0.x-dev
Issue summary: View changes
Status: Postponed (maintainer needs more info) » Active
t_stallmann’s picture

t_stallmann commented

Still active on 2.0.x and the patch still works.

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
Parent issue: » #3376481: [META] Add setting for scroll behavior (position, treshold, delay)

Thanks for the feedback! I don't think we should add this, as this simply scrolls to the top of the page, but if the view is already in a lower part of the page, it scrolls to an unexpected position.

To have something like this added, it needs to be configurable. So we should instead focus on the parent task: #3376481: [META] Add setting for scroll behavior (position, treshold, delay)

This one will not be merged as-is, as it doesn't fit well for all cases.

joachim’s picture

joachim commented
Category: Feature request » Task

This is surely a bug!

With JS disabled, the loading of more content is done with the 'Load more' button.

So:

1. I load the page
2. I scroll down, reading items
3. I reach the 'load more' button
4. I click it.

The expectation is that I see more content added where the button was, so I can continue reading smoothly.

Getting jumped back to the very top of the list is not good UX at all!