golem/MinervaNeue
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge "Don't scroll vertically when scrolling active tab into view"

Browse Source
This commit is contained in:
jenkins-bot 2019-06-25 14:13:24 +00:00 committed by Gerrit Code Review
commit 141d9a89ed
1 changed files with 27 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
resources/skins.minerva.scripts/init.js
View File

@ -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()
);
} }
} }