디즈니 전용관 작업 중

This commit is contained in:
2025-10-02 00:29:08 +09:00
parent 0b4c92797a
commit 92a1a58463
4 changed files with 105 additions and 85 deletions

View File

@@ -1022,6 +1022,53 @@
};
}
// 탭 스크롤 함수 (공통)
function scrollToTab(targetTab, $clickedTab) {
var $tabNavigation = $(".tabNavigation");
var $tabList = $(".tabList");
var tabNavigationWidth = $tabNavigation.width();
var tabListWidth = $tabList[0].scrollWidth;
if (tabListWidth > tabNavigationWidth) {
var scrollLeft;
// #information 또는 #moreFeatures 탭인 경우 맨 끝으로 스크롤
if (targetTab === "#information" || targetTab === "#moreFeatures") {
scrollLeft = tabListWidth - tabNavigationWidth;
} else {
// 탭의 절대 위치 계산 (부모 컨테이너 기준)
var tabOffsetLeft = $clickedTab.offset().left;
var tabNavigationOffsetLeft = $tabNavigation.offset().left;
var relativeTabOffset = tabOffsetLeft - tabNavigationOffsetLeft;
var tabWidth = $clickedTab.outerWidth();
var tabCenter = relativeTabOffset + tabWidth / 2;
var navigationCenter = tabNavigationWidth / 2;
scrollLeft = tabCenter - navigationCenter;
// 스크롤 범위 제한
var maxScrollLeft = tabListWidth - tabNavigationWidth;
scrollLeft = Math.max(0, Math.min(scrollLeft, maxScrollLeft));
}
// 부드러운 스크롤 애니메이션
$tabNavigation.animate(
{
scrollLeft: scrollLeft,
},
300,
"easeInOutQuart"
);
// 대안 방법: scrollTo 사용
setTimeout(function () {
$tabNavigation[0].scrollTo({
left: scrollLeft,
behavior: "smooth",
});
}, 50);
}
}
// 탭 네비게이션 기능
$(document).ready(function () {
// Disney 스와이퍼 초기화
@@ -1060,11 +1107,11 @@
var disneyFeaturesSwiper = new Swiper(".features-list-swiper", {
slidesPerView: "auto",
spaceBetween: 16,
loop: true,
autoplay: {
delay: 1500,
disableOnInteraction: false,
},
// loop: true,
// autoplay: {
// delay: 1500,
// disableOnInteraction: false,
// },
// pagination: {
// el: ".swiper-pagination",
// clickable: true,
@@ -1101,52 +1148,7 @@
$targetContent.addClass("active");
// 탭 가로스크롤 중앙 정렬
var $tabNavigation = $(".tabNavigation");
var $tabList = $(".tabList");
var tabNavigationWidth = $tabNavigation.width();
// 탭 리스트의 실제 너비 계산 (여러 방법 시도)
var tabListWidth = $tabList[0].scrollWidth; // 스크롤 가능한 전체 너비
var tabListOffsetWidth = $tabList[0].offsetWidth; // 현재 보이는 너비
var tabListOuterWidth = $tabList.outerWidth(); // jQuery outerWidth
console.log("탭 네비게이션 너비:", tabNavigationWidth);
console.log("탭 리스트 scrollWidth:", tabListWidth);
console.log("탭 리스트 offsetWidth:", tabListOffsetWidth);
console.log("탭 리스트 outerWidth:", tabListOuterWidth);
// 탭 리스트가 네비게이션보다 넓을 때만 스크롤 조정
if (tabListWidth > tabNavigationWidth) {
// 탭의 절대 위치 계산 (부모 컨테이너 기준)
var tabOffsetLeft = $clickedTab.offset().left;
var tabNavigationOffsetLeft = $tabNavigation.offset().left;
var relativeTabOffset = tabOffsetLeft - tabNavigationOffsetLeft;
var tabWidth = $clickedTab.outerWidth();
var tabCenter = relativeTabOffset + tabWidth / 2;
var navigationCenter = tabNavigationWidth / 2;
var scrollLeft = tabCenter - navigationCenter;
// 스크롤 범위 제한
var maxScrollLeft = tabListWidth - tabNavigationWidth;
scrollLeft = Math.max(0, Math.min(scrollLeft, maxScrollLeft));
// 부드러운 스크롤 애니메이션
$tabNavigation.animate(
{
scrollLeft: scrollLeft,
},
300,
"easeInOutQuart"
);
// 대안 방법: scrollTo 사용
setTimeout(function () {
$tabNavigation[0].scrollTo({
left: scrollLeft,
behavior: "smooth",
});
}, 50);
}
scrollToTab(targetTab, $clickedTab);
// 해당 탭 콘텐츠로 스크롤 이동
if ($targetContent.length) {
@@ -1183,6 +1185,9 @@
$(".tabContent").removeClass("active");
$correspondingTab.addClass("active");
$this.addClass("active");
// 탭 가로스크롤 중앙 정렬
scrollToTab("#" + tabId, $correspondingTab);
}
}
});