Merge pull request #16 from internetarchive/webdev-6544-ff-volume-scr…

…oll-fix

Applied fix for FF and other browsers to auto-scroll to active volume

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-item-navigator",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Internet Archive's Item Navigator, visually explore an item's contents.",
   "repository": {
     "type": "git",

src/menus/viewable-files.ts

@@ -222,12 +222,20 @@ export class IauxViewableFiles extends LitElement {
     // allow for css animations to run before scrolling to active file
     setTimeout(() => {
       // scroll active file into view if needed
-      // note: `scrollIntoViewIfNeeded` handles auto-scroll gracefully for Chrome, Safari
-      // Firefox does not have this capability yet as it does not support `scrollIntoViewIfNeeded`
-      activeFile?.scrollIntoViewIfNeeded(true);
-
-      // Todo: support `scrollIntoView` or `parentContainer.crollTop = x` for FF & "IE 11"
-      // currently, the hard `position: absolutes` misaligns subpanel when `scrollIntoView` is applied :(
+      // note:
+      // - `scrollIntoViewIfNeeded` handles auto-scroll gracefully for Chrome, Safari
+      // - `scrollIntoView` handles auto-scroll for almost all the browsers. specifially FF.
+      if (activeFile?.scrollIntoViewIfNeeded) {
+        // `scrollIntoViewIfNeeded` auto-scroll only if element not is visible area
+        activeFile?.scrollIntoViewIfNeeded(true);
+      } else {
+        // `scrollIntoView` always auto-scroll to center of visible area
+        activeFile?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'nearest',
+        });
+      }
     }, 350);
   }