Page MenuHomePhabricator

Scrolling elements into view does not work in most cases
Closed, ResolvedPublic

Description

Scrolling elements into view does not work in most cases; in fact it seems to depend on some Blink-specific behaviors and thus only works reliably on Blink.

In particular, the code below doesn't scroll the page at all when it clearly should. (Adjust the numbers to be large enough for your screen.)

var el = new OO.ui.Element( { text: 'Test' } );
el.$element.css( { position: 'absolute', left: 2000, top: 3000 } );
el.$element.appendTo( 'body' );
el.scrollElementIntoView();

T73540 in VE is another case, the page is only scrolled horizontally in Blink (although vertical scrolling works).

I haven't investigated closely, but getClosestScrollableContainer() hard-codes document's body for some cases, and apparently browsers prefer to scroll documentElement instead.

(Prior to T56928 it fell back on window, and Krinkle's comments on that bug claim that jQuery can't animate scrolling on documentElement. I haven't verified that.)

Details

Event Timeline

bzimport raised the priority of this task from to High.Nov 22 2014, 4:00 AM
bzimport added a project: OOUI.
bzimport set Reference to bz71609.
matmarex renamed this task from OOjs UI: Scrolling elements into view does not work in most cases to Scrolling elements into view does not work in most cases.Nov 29 2014, 9:49 PM
matmarex updated the task description. (Show Details)
matmarex set Security to None.

Change 176666 had a related patch set uploaded (by Prtksxna):
Element.getClosestScrollableContainer: Use 'body' or 'documentElement' based on browser

https://gerrit.wikimedia.org/r/176666

Patch-For-Review

Change 176666 merged by jenkins-bot:
Element.getClosestScrollableContainer: Use 'body' or 'documentElement' based on browser

https://gerrit.wikimedia.org/r/176666