Don't scroll vertically when scrolling active tab into view
Do the scrolling math manually, and only do horizontal scrolling on the tab container. Don't do vertical scrolling, and don't scroll the viewport. Bug: T226112 Bug: T223142 Change-Id: Ie67e15bd51252906897a213505ae82cf29ba5cf2
This commit is contained in:
parent
7ebab3c9eb
commit
b64b4c1b9f
@ -299,20 +299,35 @@
|
|||||||
* @return {void}
|
* @return {void}
|
||||||
*/
|
*/
|
||||||
function initTabsScrollPosition() {
|
function initTabsScrollPosition() {
|
||||||
var selectedTabSelector = '.minerva__tab.selected',
|
var $tabContainer, tabPosition, containerPosition, left, right,
|
||||||
$selectedTab;
|
// eslint-disable-next-line no-jquery/no-global-selector
|
||||||
if ( window.pageYOffset ) {
|
$selectedTab = $( '.minerva__tab.selected' );
|
||||||
// The user has already scrolled down the page.
|
if ( $selectedTab.length !== 1 ) {
|
||||||
// Calling scrollIntoView() below would force the page to
|
|
||||||
// scroll back all the way up. That is undesirable.
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
$selectedTab = $( selectedTabSelector );
|
|
||||||
if ( $selectedTab.length === 1 ) {
|
$tabContainer = $selectedTab.closest( '.minerva__tab-container' );
|
||||||
$selectedTab[ 0 ].scrollIntoView( {
|
tabPosition = $selectedTab.position();
|
||||||
block: 'end', // does nothing since we're already at the top of the page
|
containerPosition = $tabContainer.position();
|
||||||
inline: 'center' // center horizontally
|
// Position of the left edge of $selectedTab relative to the left edge of $tabContainer
|
||||||
} );
|
left = tabPosition.left - containerPosition.left;
|
||||||
|
// Position of the right edge of $selectedTab relative to the left edge of $tabContainer
|
||||||
|
right = left + $selectedTab.outerWidth();
|
||||||
|
|
||||||
|
// If $selectedTab is (partly) scrolled out of view, scroll it into view
|
||||||
|
// This only considers and manipulates the horizontal scroll position within $tabContainer,
|
||||||
|
// not the vertical scroll position of the viewport
|
||||||
|
if ( left < 0 ) {
|
||||||
|
// Left edge of $selectedTab is to the left of the left edge of $tabContainer
|
||||||
|
// Scroll $tabContainer to the left, by subtracting the difference from its scrollLeft
|
||||||
|
// (we're subtracting here by adding a negative number)
|
||||||
|
$tabContainer.scrollLeft( $tabContainer.scrollLeft() + left );
|
||||||
|
} else if ( right > $tabContainer.innerWidth() ) {
|
||||||
|
// Right edge of $selectedTab is to the right of the right edge of $tabContainer
|
||||||
|
// Scroll $tabContainer to the right, by adding the difference to its scrollLeft
|
||||||
|
$tabContainer.scrollLeft(
|
||||||
|
$tabContainer.scrollLeft() + right - $tabContainer.innerWidth()
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user