From 4bb1dcbce2c06f44d0968ce87b9d0268d56fda1e Mon Sep 17 00:00:00 2001
From: joeliu0999 <s990217.tyc.edu.tw@gmail.com>
Date: Tue, 26 Sep 2023 18:27:18 -0400
Subject: [PATCH 1/2] feat: added scrolling for portfolio

---
 public/css/index.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/public/css/index.css b/public/css/index.css
index 4aa4ccf..2a266a6 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -90,7 +90,7 @@ body {
 }
 
 .portfolio__cards__scroll {
-    overflow-x: hidden;
+    overflow-x: scroll;
     overflow-y: hidden;
     display: flex;
     gap: 20px;
@@ -99,6 +99,10 @@ body {
     margin: 0 auto;
 }
 
+.portfolio__cards__scroll::-webkit-scrollbar{
+    width: 0;
+}
+
 .portfolio .portfolio__cards {
     position: relative;
     width: 100vw;

From 4b6a513a27f0f46924a767a03aac7c3de0060fdd Mon Sep 17 00:00:00 2001
From: zeim839 <zeim839@users.noreply.github.com>
Date: Tue, 10 Oct 2023 21:42:59 -0400
Subject: [PATCH 2/2] feat: show/hide portfolio buttons on scroll

---
 public/js/index.js | 60 +++++++++++++++-------------------------------
 1 file changed, 19 insertions(+), 41 deletions(-)

diff --git a/public/js/index.js b/public/js/index.js
index 921b7bf..863eb51 100644
--- 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