99 lines
2.5 KiB
JavaScript
99 lines
2.5 KiB
JavaScript
// 简单直接的时间线滚动处理脚本
|
||
// 该脚本使用最简单的方式实现时间线滚动功能
|
||
|
||
(() => {
|
||
// 简单的滚动处理函数
|
||
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,
|
||
});
|
||
}
|
||
})();
|