fix: scrollable if hidden by frame (#616)

92thunder · stipsan · commit 54d73bdbc39d · 2020-01-02T10:39:43.000+01:00
diff --git a/integration/__snapshots__/iframe.test.js.snap b/integration/__snapshots__/iframe.test.js.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`scrollable element is "overflow: visible" but hidden by iframe should scroll to inside iframe 1`] = `
+Array [
+  Object {
+    "el": "html",
+    "left": 0,
+    "top": 116,
+  },
+]
+`;
diff --git a/integration/iframe.html b/integration/iframe.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<script src="../umd/compute-scroll-into-view.js"></script>
+<script src="./utils.js"></script>
+<iframe srcdoc="
+    <div class='container' style='height: 100vh'></div>
+    <div class='target' style='background: crimson; px; height: 100px; width: 100px;'></div>
+">
+</iframe>
+    
diff --git a/integration/iframe.test.js b/integration/iframe.test.js
@@ -0,0 +1,21 @@
+beforeAll(async () => {
+  await page.goto('http://localhost:3000/integration/iframe')
+})
+
+describe('scrollable element is "overflow: visible" but hidden by iframe', () => {
+  test('should scroll to inside iframe', async () => {
+    expect.assertions(3)
+    const actual = await page.evaluate(() => {
+      const iframe = document.querySelector('iframe')
+      const target = iframe.contentDocument.querySelector('.target')
+      return window
+        .computeScrollIntoView(target, {
+          scrollMode: 'always',
+        })
+        .map(window.mapActions)
+    })
+    expect(actual).toHaveLength(1)
+    expect(actual[0]).toMatchObject({ el: 'html' })
+    expect(actual).toMatchSnapshot()
+  })
+})
diff --git a/src/index.ts b/src/index.ts
@@ -64,12 +64,31 @@ function canOverflow(
   return overflow !== 'visible' && overflow !== 'clip'
 }
 
+function getFrameElement(el: Element) {
+  if (!el.ownerDocument || !el.ownerDocument.defaultView) {
+    return null
+  }
+  return el.ownerDocument.defaultView.frameElement
+}
+
+function isHiddenByFrame(el: Element): boolean {
+  const frame = getFrameElement(el)
+  if (!frame) {
+    return false
+  }
+
+  return (
+    frame.clientHeight < el.scrollHeight || frame.clientWidth < el.scrollWidth
+  )
+}
+
 function isScrollable(el: Element, skipOverflowHiddenElements?: boolean) {
   if (el.clientHeight < el.scrollHeight || el.clientWidth < el.scrollWidth) {
     const style = getComputedStyle(el, null)
     return (
       canOverflow(style.overflowY, skipOverflowHiddenElements) ||
-      canOverflow(style.overflowX, skipOverflowHiddenElements)
+      canOverflow(style.overflowX, skipOverflowHiddenElements) ||
+      isHiddenByFrame(el)
     )
   }
 
@@ -296,14 +315,14 @@ export default (target: Element, options: Options): CustomScrollAction[] => {
     block === 'start' || block === 'nearest'
       ? targetTop
       : block === 'end'
-        ? targetBottom
-        : targetTop + targetHeight / 2 // block === 'center
+      ? targetBottom
+      : targetTop + targetHeight / 2 // block === 'center
   let targetInline: number =
     inline === 'center'
       ? targetLeft + targetWidth / 2
       : inline === 'end'
-        ? targetRight
-        : targetLeft // inline === 'start || inline === 'nearest
+      ? targetRight
+      : targetLeft // inline === 'start || inline === 'nearest
 
   // Collect new scroll positions
   const computations: CustomScrollAction[] = []
