Merge pull request #173 from daodaoedu/dev

merge to prod
daodaoedu · Dec 16, 2024 · d475c3c · d475c3c
2 parents a7e5673 + a10f00f
commit d475c3c
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/components/Marathon/Mentors.jsx b/components/Marathon/Mentors.jsx
@@ -205,9 +205,12 @@ 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 currentTranslateX = currentMentor * 301;
-    if (window.innerWidth + currentTranslateX > mentorsRef.current?.scrollWidth) {
-      return { translateX: mentorsRef.current?.scrollWidth - window.innerWidth, isEnd: true };
+    if (window.innerWidth + currentTranslateX > mentorsWidth) {
+      return { translateX: mentorsWidth - window.innerWidth, isEnd: true };
     }
     return { translateX: currentTranslateX, isEnd: false };
   }, [currentMentor]);
@@ -287,10 +290,15 @@ const Mentors = () => {
           </IconButton>
         </div>
       </div>
+      <div className="px-6 lg:px-60 mt-4 text-basic-500">
+        <p>
+          本次引導師皆有豐富的自主學習實踐與陪伴引導經驗，共六位：林怡廷（島島阿學發起人）、許明宏（島島阿學發起人）、謝佩君（Talent Lab-Learning Facilitator）、沈潔伃（魚水教育催化劑創辦人）、閉恩濡（實驗教育工作者）、楊逸帆（《學習的理由》紀錄片導演）。
+        </p>
+      </div>
 
       <div
         ref={mentorsRef}
-        className="flex gap-4 mt-9 px-6 lg:pl-60 overflow-x-hidden select-none"
+        className="flex gap-4 mt-9 px-6 lg:pl-60 overflow-x-auto select-none"
         onTouchStart={handleTouchStart}
         onTouchMove={handleTouchMove}
         onTouchEnd={handleTouchEnd}