feat: show/hide portfolio buttons on scroll

ufosc · Oct 11, 2023 · 80a90b6 · 80a90b6
1 parent 5f7a24c
commit 80a90b6
Showing 1 changed file with 19 additions and 41 deletions.
diff --git a/public/js/index.js b/public/js/index.js
@@ -1,61 +1,39 @@
-/* global ResizeObserver, XMLHttpRequest, alert, turnstile */
+/* global XMLHttpRequest, alert, turnstile */
 const horizontalScrollContainer = document.querySelector('.portfolio__cards__scroll')
 const btnLeft = document.querySelector('.portfolio__cards__scroll__btn-left')
 const btnRight = document.querySelector('.portfolio__cards__scroll__btn-right')
 const scrollableWidth = horizontalScrollContainer.scrollWidth
-const elementWidth = horizontalScrollContainer.clientWidth
-let totalScrollableWidth = (scrollableWidth - elementWidth)
+let totalScrollableWidth = (scrollableWidth - horizontalScrollContainer.clientWidth)
 
-let ourScroll = 0
-
-new ResizeObserver(function (entries) {
-  const horizontalScrollContainer = document.querySelector('.portfolio__cards__scroll')
+const setScrollButtons = () => {
   totalScrollableWidth = (horizontalScrollContainer.scrollWidth - horizontalScrollContainer.clientWidth)
-
-  if (ourScroll < totalScrollableWidth) {
+  if (horizontalScrollContainer.scrollLeft === 0) {
+    btnLeft.style.display = 'none'
     btnRight.style.display = 'block'
     return
   }
-
-  btnRight.style.display = 'none'
-  ourScroll = totalScrollableWidth
-}).observe(document.querySelector('.portfolio__cards__scroll'))
-
-const swipeLeft = () => {
-  horizontalScrollContainer.scrollLeft -= 300
-}
-
-const swipeRight = () => {
-  horizontalScrollContainer.scrollLeft += 300
-}
-
-btnLeft.onclick = () => {
-  swipeLeft()
-  ourScroll = (ourScroll - 300 >= 0 ? ourScroll - 300 : 0)
-  btnLeft.style.display = 'none'
-
-  if (ourScroll > 0) {
+  if (horizontalScrollContainer.scrollLeft === totalScrollableWidth) {
     btnLeft.style.display = 'block'
+    btnRight.style.display = 'none'
+    return
   }
-
-  if (ourScroll < totalScrollableWidth + 300) {
+  if (horizontalScrollContainer.scrollLeft > 0) {
+    btnLeft.style.display = 'block'
+  }
+  if (horizontalScrollContainer.scrollLeft < totalScrollableWidth) {
     btnRight.style.display = 'block'
   }
 }
 
-btnRight.onclick = () => {
-  swipeRight()
-  ourScroll += 300
-  btnLeft.style.display = 'block'
-  btnRight.style.display = 'block'
+onresize = setScrollButtons // eslint-disable-line
+horizontalScrollContainer.addEventListener('scroll', setScrollButtons)
 
-  if (ourScroll >= totalScrollableWidth + 300) {
-    btnRight.style.display = 'none'
-  }
+btnLeft.onclick = () => {
+  horizontalScrollContainer.scrollLeft -= 300
+}
 
-  if (ourScroll !== 0) {
-    btnLeft.style.display = 'block'
-  }
+btnRight.onclick = () => {
+  horizontalScrollContainer.scrollLeft += 300
 }
 
 // eslint-disable-next-line