Merge pull request #174 from daodaoedu/feature/learning-marathon

fix: mentors carousel behavior issues
daodaoedu · Dec 16, 2024 · 28e6aa2 · 28e6aa2
2 parents 6b4aaab + 088ec63
commit 28e6aa2
Showing 1 changed file with 29 additions and 27 deletions.
diff --git a/components/Marathon/Mentors.jsx b/components/Marathon/Mentors.jsx
@@ -205,12 +205,10 @@ const Mentors = () => {
   const [touchStartX, setTouchStartX] = useState(null);
   const timer = useRef(null);
   const { translateX, isEnd } = useMemo(() => {
-    // 因為 Safari 使用父層的 scrollWidth 再搭配 transform 時，scrollWidth 會越變越小，所以改用計算寬度
-    // 計算 mentors 的寬度，包含了 gap 和 padding
-    const mentorsWidth = mentorsRef.current?.children?.[0]?.clientWidth * mentors.length + 16 * (mentors.length - 1) + 48;
+    const mentorsWidth = mentorsRef.current?.scrollWidth;
     const currentTranslateX = currentMentor * 301;
     if (window.innerWidth + currentTranslateX > mentorsWidth) {
-      return { translateX: mentorsWidth - window.innerWidth, isEnd: true };
+      return { translateX: mentorsWidth - window.innerWidth + 16, isEnd: true };
     }
     return { translateX: currentTranslateX, isEnd: false };
   }, [currentMentor]);
@@ -291,34 +289,38 @@ const Mentors = () => {
         </div>
       </div>
       <div
-        ref={mentorsRef}
-        className="flex gap-4 mt-9 px-6 lg:pl-60 overflow-x-auto select-none"
+        className="mt-9 overflow-x-hidden select-none"
         onTouchStart={handleTouchStart}
         onTouchMove={handleTouchMove}
         onTouchEnd={handleTouchEnd}
       >
-        {mentors.map((mentor) => (
-          <MentorCard
-            key={mentor.name}
-            mentor={mentor}
-            className="transition-transform duration-300 cursor-pointer"
-            style={{ transform: `translateX(-${translateX}px)` }}
-            onClick={() => handleOpenModal(mentor.name)}
-          >
-            <div className="absolute bottom-0 left-0 right-0 p-4">
-              <div className="flex gap-2">
-                {mentor.tags.slice(0, 1).map((tag, index) => (
-                  <Tag
-                    key={tag}
-                    text={tag}
-                    className={index === 0 && "shrink-0"}
-                  />
-                ))}
+        <div
+          ref={mentorsRef}
+          className="flex gap-4 px-6 lg:pl-60 transition-transform duration-300"
+          style={{ transform: `translateX(-${translateX}px)` }}
+        >
+          {mentors.map((mentor) => (
+            <MentorCard
+              key={mentor.name}
+              mentor={mentor}
+              className="cursor-pointer"
+              onClick={() => handleOpenModal(mentor.name)}
+            >
+              <div className="absolute bottom-0 left-0 right-0 p-4">
+                <div className="flex gap-2">
+                  {mentor.tags.slice(0, 1).map((tag, index) => (
+                    <Tag
+                      key={tag}
+                      text={tag}
+                      className={index === 0 && "shrink-0"}
+                    />
+                  ))}
+                </div>
+                <div className="heading-md text-white text-start mt-2">{mentor.title} | {mentor.name}</div>
               </div>
-              <div className="heading-md text-white text-start mt-2">{mentor.title} | {mentor.name}</div>
-            </div>
-          </MentorCard>
-        ))}
+            </MentorCard>
+          ))}
+        </div>
       </div>
 
       <Modal