infinite scroll: add phx-viewport-overrun-target (#4053)

Author: SteffenDE

assets/js/phoenix_live_view/constants.js

@@ -43,6 +43,7 @@ export const PHX_MAIN = "data-phx-main";
 export const PHX_ROOT_ID = "data-phx-root-id";
 export const PHX_VIEWPORT_TOP = "viewport-top";
 export const PHX_VIEWPORT_BOTTOM = "viewport-bottom";
+export const PHX_VIEWPORT_OVERRUN_TARGET = "viewport-overrun-target";
 export const PHX_TRIGGER_ACTION = "trigger-action";
 export const PHX_HAS_FOCUSED = "phx-has-focused";
 export const FOCUSABLE_INPUTS = [

assets/js/phoenix_live_view/hooks.js

@@ -3,6 +3,7 @@ import {
   PHX_LIVE_FILE_UPDATED,
   PHX_PREFLIGHTED_REFS,
   PHX_UPLOAD_REF,
+  PHX_VIEWPORT_OVERRUN_TARGET,
 } from "./constants";
 
 import LiveUploader from "./live_uploader";
@@ -218,7 +219,8 @@ Hooks.InfiniteScroll = {
         scrollBefore = scrollNow;
         return pendingOp();
       }
-      const rect = this.el.getBoundingClientRect();
+
+      const rect = this.findOverrunTarget();
       const topEvent = this.el.getAttribute(
         this.liveSocket.binding("viewport-top"),
       );
@@ -293,5 +295,23 @@ Hooks.InfiniteScroll = {
       }
     };
   },
+
+  findOverrunTarget() {
+    let rect;
+    const overrunTarget = this.el.getAttribute(
+      this.liveSocket.binding(PHX_VIEWPORT_OVERRUN_TARGET),
+    );
+    if (overrunTarget) {
+      const overrunEl = document.getElementById(overrunTarget);
+      if (overrunEl) {
+        rect = overrunEl.getBoundingClientRect();
+      } else {
+        throw new Error("did not find element with id " + overrunTarget);
+      }
+    } else {
+      rect = this.el.getBoundingClientRect();
+    }
+    return rect;
+  },
 };
 export default Hooks;