diff --git a/FRONTEND/src/components/ModalHistory.tsx b/FRONTEND/src/components/ModalHistory.tsx index 963f87f..efe4a8e 100644 --- a/FRONTEND/src/components/ModalHistory.tsx +++ b/FRONTEND/src/components/ModalHistory.tsx @@ -201,14 +201,25 @@ function ModalHistory({ const scrollToStation = (stationId: number) => { // Try to scroll to content first (line group đầu tiên hoặc message) const contentElement = stationContentRefs.current.get(stationId); + const stationHeader = stationRefs.current.get(stationId); + if (contentElement && scrollViewportRef.current) { const scrollContainer = scrollViewportRef.current; - const containerTop = scrollContainer.getBoundingClientRect().top; - const elementTop = contentElement.getBoundingClientRect().top; - const scrollTop = scrollContainer.scrollTop; + const containerRect = scrollContainer.getBoundingClientRect(); + const contentRect = contentElement.getBoundingClientRect(); + const currentScrollTop = scrollContainer.scrollTop; + + // Tính toán vị trí scroll để content nằm ngay dưới sticky header + // Sticky header có position: sticky, top: 0, nên luôn ở top của viewport + const headerHeight = stationHeader ? stationHeader.offsetHeight : 0; + + // Scroll đến vị trí sao cho content nằm ngay dưới sticky header + // contentRect.top - containerRect.top là khoảng cách từ content đến top của container + // Trừ đi headerHeight để content nằm ngay dưới header + const targetScrollTop = currentScrollTop + (contentRect.top - containerRect.top) - headerHeight; scrollContainer.scrollTo({ - top: scrollTop + elementTop - containerTop - 10, // 10px offset from top + top: Math.max(0, targetScrollTop), behavior: "smooth", }); return; @@ -223,7 +234,7 @@ function ModalHistory({ const scrollTop = scrollContainer.scrollTop; scrollContainer.scrollTo({ - top: scrollTop + elementTop - containerTop - 10, // 10px offset from top + top: scrollTop + elementTop - containerTop, behavior: "smooth", }); }