Browse Source

Editor: Fixed bouncy view in sidebar caused by `scrollIntoView()` (#28485)

* use scrollTo, not scrollIntoView

* cleanup
ycw 1 year ago
parent
commit
f75fb41bb0
2 changed files with 20 additions and 4 deletions
  1. 0 3
      editor/js/Sidebar.Properties.js
  2. 20 1
      editor/js/libs/ui.js

+ 0 - 3
editor/js/Sidebar.Properties.js

@@ -49,17 +49,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' } );
 
 		}
 

+ 20 - 1
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;
 
 	}