fix: swapped deprecated pageYOffset and pageXOffset with scrollY and …

…scrollX
egstad-construct · Nov 3, 2023 · 72cfe56 · 72cfe56
1 parent 8b6d195
commit 72cfe56
Show file tree

Hide file tree

Showing 14 changed files with 8,685 additions and 5,375 deletions.
diff --git a/coverage/lcov-report/events.js.html b/coverage/lcov-report/events.js.html
@@ -244,7 +244,7 @@ <h1><a href="index.html">All files</a> events.js</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Tue Jul 20 2021 17:41:56 GMT-0700 (Pacific Daylight Time)
+                at Thu Nov 02 2023 20:19:10 GMT-0500 (Central Daylight Time)
             </div>
         </div>
         <script src="prettify.js"></script>

diff --git a/coverage/lcov-report/getElement.js.html b/coverage/lcov-report/getElement.js.html
@@ -130,7 +130,7 @@ <h1><a href="index.html">All files</a> getElement.js</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Tue Jul 20 2021 17:41:56 GMT-0700 (Pacific Daylight Time)
+                at Thu Nov 02 2023 20:19:10 GMT-0500 (Central Daylight Time)
             </div>
         </div>
         <script src="prettify.js"></script>

diff --git a/coverage/lcov-report/index.html b/coverage/lcov-report/index.html
@@ -110,7 +110,7 @@ <h1>All files</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Tue Jul 20 2021 17:41:56 GMT-0700 (Pacific Daylight Time)
+                at Thu Nov 02 2023 20:19:10 GMT-0500 (Central Daylight Time)
             </div>
         </div>
         <script src="prettify.js"></script>

diff --git a/dist/app.c328ef1a.js b/dist/app.c328ef1a.js
diff --git a/dist/app.c328ef1a.js.map b/dist/app.c328ef1a.js.map
diff --git a/dist/example.80ee2152.js b/dist/example.80ee2152.js
diff --git a/dist/example.80ee2152.js.map b/dist/example.80ee2152.js.map
diff --git a/docs/app.bac1efa4.js b/docs/app.bac1efa4.js
diff --git a/docs/app.bac1efa4.js.map b/docs/app.bac1efa4.js.map
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>EGSTAD • Detect Theme</title><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap" rel="stylesheet"><link rel="stylesheet" href="example.fd9e1284.css"></head><body> <div class="tip window"> <div> <span class="elem pill">window</span> <span class="stat">is not scrolling</span> <span class="dire"></span> </div> <div> <span>x:<span class="x">0</span></span> <span>y:<span class="y">0</span></span> </div> </div> <div class="poster"> <div class="hori"> <div class="item"> Detect<span class="blink">Scroll</span>.js is a performant and lightweight ES6 module for detecting scroll activity. <a href="https://github.com/egstad-construct/detect-scroll" target="_blank">GITHUB</a> Created by <a href="https://egstad.com" target="_blank">EGSTAD</a> </div> </div> </div> <script src="app.000403a2.js"></script> </body></html>
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>EGSTAD • Detect Theme</title><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap" rel="stylesheet"><link rel="stylesheet" href="example.fd9e1284.css"></head><body> <div class="tip window"> <div> <span class="elem pill">window</span> <span class="stat">is not scrolling</span> <span class="dire"></span> </div> <div> <span>x:<span class="x">0</span></span> <span>y:<span class="y">0</span></span> </div> </div> <div class="poster"> <div class="hori"> <div class="item"> Detect<span class="blink">Scroll</span>.js is a performant and lightweight ES6 module for detecting scroll activity. <a href="https://github.com/egstad-construct/detect-scroll" target="_blank">GITHUB</a> Created by <a href="https://egstad.com" target="_blank">EGSTAD</a> </div> </div> </div> <script src="app.bac1efa4.js"></script> </body></html>
diff --git a/example/app.js b/example/app.js
@@ -32,6 +32,8 @@ window.detectScroll = new DetectScroll(window, {
     scrollStop: () => {
       updateState(state1, 'is not scrolling')
       updateDirection(dir1, '')
+      updateDirection(x1, Math.round(window.detectScroll.x))
+      updateDirection(y1, Math.round(window.detectScroll.y))
     },
     scrollUp: (ev) => {
       updateDirection(dir1, 'up')

diff --git a/index.js b/index.js
@@ -97,7 +97,7 @@ export default class DetectScroll {
   }
 
   getY() {
-    return this.isWindow ? window.pageYOffset : this.el.scrollTop
+    return this.isWindow ? window.scrollY : this.el.scrollTop
   }
 
   getYMax() {
@@ -131,7 +131,7 @@ export default class DetectScroll {
   }
 
   getX() {
-    return this.isWindow ? window.pageXOffset : this.el.scrollLeft
+    return this.isWindow ? window.scrollX : this.el.scrollLeft
   }
 
   getXMax() {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>EGSTAD • Detect Theme</title><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap" rel="stylesheet"><link rel="stylesheet" href="example.fd9e1284.css"></head><body> <div class="tip window"> <div> <span class="elem pill">window</span> <span class="stat">is not scrolling</span> <span class="dire"></span> </div> <div> <span>x:<span class="x">0</span></span> <span>y:<span class="y">0</span></span> </div> </div> <div class="poster"> <div class="hori"> <div class="item"> Detect<span class="blink">Scroll</span>.js is a performant and lightweight ES6 module for detecting scroll activity. <a href="https://github.com/egstad-construct/detect-scroll" target="_blank">GITHUB</a> Created by <a href="https://egstad.com" target="_blank">EGSTAD</a> </div> </div> </div> <script src="app.000403a2.js"></script> </body></html>
		<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>EGSTAD • Detect Theme</title><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap" rel="stylesheet"><link rel="stylesheet" href="example.fd9e1284.css"></head><body> <div class="tip window"> <div> <span class="elem pill">window</span> <span class="stat">is not scrolling</span> <span class="dire"></span> </div> <div> <span>x:<span class="x">0</span></span> <span>y:<span class="y">0</span></span> </div> </div> <div class="poster"> <div class="hori"> <div class="item"> Detect<span class="blink">Scroll</span>.js is a performant and lightweight ES6 module for detecting scroll activity. <a href="https://github.com/egstad-construct/detect-scroll" target="_blank">GITHUB</a> Created by <a href="https://egstad.com" target="_blank">EGSTAD</a> </div> </div> </div> <script src="app.bac1efa4.js"></script> </body></html>