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

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

This commit is contained in:
jenkins-bot 2019-06-25 14:13:24 +00:00 committed by Gerrit Code Review
parent 62090bcd69 b64b4c1b9f
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}
*/
function initTabsScrollPosition() {
var selectedTabSelector = '.minerva__tab.selected',
$selectedTab;
if ( window.pageYOffset ) {
// The user has already scrolled down the page.
// Calling scrollIntoView() below would force the page to
// scroll back all the way up. That is undesirable.
var $tabContainer, tabPosition, containerPosition, left, right,
// eslint-disable-next-line no-jquery/no-global-selector
$selectedTab = $( '.minerva__tab.selected' );
if ( $selectedTab.length !== 1 ) {
return;
}
$selectedTab = $( selectedTabSelector );
if ( $selectedTab.length === 1 ) {
$selectedTab[ 0 ].scrollIntoView( {
block: 'end', // does nothing since we're already at the top of the page
inline: 'center' // center horizontally
} );
$tabContainer = $selectedTab.closest( '.minerva__tab-container' );
tabPosition = $selectedTab.position();
containerPosition = $tabContainer.position();
// 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()
);
}
}