fix(DIST-370): Change scroll top calculation

Matej Lednicky · Matej Lednicky · commit 92cb67cc05e7 · 2020-08-03T16:15:47.000+02:00
Scroll top offset calculation was failing for HTML pages without proper DOCTYPE definition.
diff --git a/demo/behavioral-code/scroll-code.html b/demo/behavioral-code/scroll-code.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!-- intentionally leaving out the <!DOCTYPE html> -->
 <html lang="en">
   <head>
     <title>Open: scroll (via embed code)</title>
@@ -59,7 +59,7 @@ <h2>Customize the percentage</h2>
         const offsetTop = window.pageYOffset || document.documentElement.scrollTop
         const clientTop = document.documentElement.clientTop || 0
         const scrollTopPixels = offsetTop - clientTop
-        const scrollTopPercentage = scrollTopPixels / document.body.clientHeight * 100
+        const scrollTopPercentage = scrollTopPixels / document.documentElement.clientHeight * 100
         document.getElementById('scroll-pixels').innerHTML = scrollTopPixels;
         document.getElementById('scroll-percentage').innerHTML = (Math.round(scrollTopPercentage * 100) / 100).toFixed(2);
       })
diff --git a/src/core/utils/popup-auto-open.js b/src/core/utils/popup-auto-open.js
@@ -18,9 +18,10 @@ const openOnScroll = (popup, scrollThreshold) => {
     const offsetTop = window.pageYOffset || document.documentElement.scrollTop
     const clientTop = document.documentElement.clientTop || 0
     const scrollTopPixels = offsetTop - clientTop
-    const scrollTopPercentage = scrollTopPixels / document.body.clientHeight * 100
-    const viewportHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
-    if (scrollTopPercentage >= scrollThreshold || scrollTopPixels + viewportHeight >= document.body.clientHeight) {
+    const scrollTopPercentage = scrollTopPixels / document.documentElement.clientHeight * 100
+    const scrolledToTheBottom = scrollTopPixels + window.innerHeight >= document.documentElement.clientHeight
+
+    if (scrollTopPercentage >= scrollThreshold || scrolledToTheBottom) {
       popup.open()
       document.removeEventListener('scroll', handleScroll)
     }
diff --git a/src/core/utils/popup-auto-open.spec.js b/src/core/utils/popup-auto-open.spec.js
@@ -88,19 +88,17 @@ describe('handleAutoOpen', () => {
 
     beforeAll(() => {
       global.document = {
-        body: {
-          clientHeight: 1000
-        },
         documentElement: {
-          clientHeight: 500
+          clientHeight: 1000
         },
         addEventListener: (_event, fn) => {
           handler = fn
         },
         removeEventListener
       }
       global.window = {
-        pageYOffset: 0
+        pageYOffset: 0,
+        innerHeight: 500
       }
     })
 
