111

public/js/simple-timeline-scroll.js

@@ -0,0 +1,98 @@
+// 简单直接的时间线滚动处理脚本
+// 该脚本使用最简单的方式实现时间线滚动功能
+
+(() => {
+	// 简单的滚动处理函数
+	function handleSimpleScroll(e) {
+		// 检查是否为时间线滚动容器
+		if (!this.classList.contains("timeline-horizontal-scroll")) {
+			return;
+		}
+
+		// 检测是否为桌面端
+		var isDesktop = window.matchMedia("(min-width: 768px)").matches;
+		if (!isDesktop) {
+			return;
+		}
+
+		// 检查是否主要是垂直滚动
+		if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
+			// 阻止默认行为
+			e.preventDefault();
+			// 将垂直滚动转换为水平滚动
+			this.scrollLeft += e.deltaY;
+		}
+	}
+
+	// 初始化函数
+	function initSimpleScroll() {
+		// 查找所有时间线水平滚动容器
+		var scrollContainers = document.querySelectorAll(
+			".timeline-horizontal-scroll",
+		);
+
+		// 为每个容器添加滚动事件监听器
+		scrollContainers.forEach((container) => {
+			// 移除之前的事件监听器
+			container.removeEventListener("wheel", handleSimpleScroll);
+			// 添加新的事件监听器
+			container.addEventListener("wheel", handleSimpleScroll, {
+				passive: false,
+			});
+		});
+	}
+
+	// 页面加载完成后初始化
+	if (document.readyState === "loading") {
+		document.addEventListener("DOMContentLoaded", initSimpleScroll);
+	} else {
+		// DOM 已经加载完成
+		initSimpleScroll();
+	}
+
+	// 监听页面加载事件
+	window.addEventListener("load", () => {
+		setTimeout(initSimpleScroll, 100);
+	});
+
+	// 监听浏览器前进/后退事件
+	window.addEventListener("pageshow", (event) => {
+		if (event.persisted) {
+			setTimeout(initSimpleScroll, 100);
+		}
+	});
+
+	// 如果使用 SWUP，监听其事件
+	if (typeof window.Swup !== "undefined") {
+		document.addEventListener("swup:contentReplaced", () => {
+			setTimeout(initSimpleScroll, 100);
+		});
+
+		document.addEventListener("swup:pageView", () => {
+			setTimeout(initSimpleScroll, 100);
+		});
+	}
+
+	// 监听 Astro 导航事件
+	document.addEventListener("astro:page-load", () => {
+		setTimeout(initSimpleScroll, 100);
+	});
+
+	document.addEventListener("astro:after-swap", () => {
+		setTimeout(initSimpleScroll, 100);
+	});
+
+	// 使用 MutationObserver 监听 DOM 变化
+	if (typeof MutationObserver !== "undefined") {
+		var observer = new MutationObserver(() => {
+			// 每次 DOM 变化时都重新初始化
+			setTimeout(initSimpleScroll, 50);
+		});
+
+		// 观察整个文档的变化
+		observer.observe(document.body, {
+			childList: true,
+			subtree: true,
+		});
+	}
+})();