use scrollTo, not scrollIntoView

mrdoob · May 24, 2024 · d9a0598 · d9a0598
1 parent 610cf0b
commit d9a0598
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/editor/js/Sidebar.Properties.js b/editor/js/Sidebar.Properties.js
@@ -28,6 +28,7 @@ function SidebarProperties( editor ) {
 
 	}
 
+	const objectTab = getTabByTabId( container.tabs, 'objectTab' );
 	const geometryTab = getTabByTabId( container.tabs, 'geometryTab' );
 	const materialTab = getTabByTabId( container.tabs, 'materialTab' );
 	const scriptTab = getTabByTabId( container.tabs, 'scriptTab' );
@@ -49,17 +50,14 @@ function SidebarProperties( editor ) {
 		if ( container.selected === 'geometryTab' ) {
 
 			container.select( geometryTab.isHidden() ? 'objectTab' : 'geometryTab' );
-			geometryTab.dom.scrollIntoView( { inline: 'center', behavior: 'smooth' } );
 
 		} else if ( container.selected === 'materialTab' ) {
 
 			container.select( materialTab.isHidden() ? 'objectTab' : 'materialTab' );
-			materialTab.dom.scrollIntoView( { inline: 'center', behavior: 'smooth' } );
 
 		} else if ( container.selected === 'scriptTab' ) {
 
 			container.select( scriptTab.isHidden() ? 'objectTab' : 'scriptTab' );
-			scriptTab.dom.scrollIntoView( { inline: 'center', behavior: 'smooth' } );
 
 		}
 

diff --git a/editor/js/libs/ui.js b/editor/js/libs/ui.js
@@ -1130,7 +1130,6 @@ class UITabbedPanel extends UIDiv {
 		if ( tab ) {
 
 			tab.addClass( 'selected' );
-			tab.dom.scrollIntoView( { inline: 'center', behavior: 'smooth' } );
 
 		}
 
@@ -1142,6 +1141,26 @@ class UITabbedPanel extends UIDiv {
 
 		this.selected = id;
 
+		// Scrolls to tab
+		if ( tab ) {
+
+			const tabOffsetRight = tab.dom.offsetLeft + tab.dom.offsetWidth;
+			const containerWidth = this.tabsDiv.dom.getBoundingClientRect().width;
+
+			if ( tabOffsetRight > containerWidth ) {
+
+				this.tabsDiv.dom.scrollTo( { left: tabOffsetRight - containerWidth, behavior: 'smooth' } );
+
+			}
+
+			if ( tab.dom.offsetLeft < this.tabsDiv.dom.scrollLeft ) {
+
+				this.tabsDiv.dom.scrollTo( { left: 0, behavior: 'smooth' } );
+
+			}
+
+		}
+
 		return this;
 
 	}