这个想法是使用更改回调并计算滚动窗口的增量。这个增量等于进度乘以我们想要滚动的距离。
但是,我假设您希望能够仅使用 prev 和 next 按钮浏览多个部分。由于用户还可以手动滚动到不同的部分,因此您需要一种方法来检测当前正在查看的部分并以编程方式转到上一个/下一个。
下面的代码通过维护一个按左坐标排序的部分列表来做到这一点。对于此示例,我将当前部分视为跨越屏幕中心线的部分。
import animate from "https://cdn.jsdelivr.net/npm/animateplus@2/animateplus.js"
const previousPage = document.querySelector("button:nth-of-type(1)")
const nextPage = document.querySelector("button:nth-of-type(2)")
const root = document.scrollingElement;
const sections = Array.from(document.querySelectorAll("section")).sort((s1, s2) => {
return s1.getBoundingClientRect().left - s2.getBoundingClientRect().left;
});
// get the section that spans the centerline
const getSectionInView = () => {
const halfWdidth = window.innerWidth / 2;
const index = sections.findIndex(s =>
s.getBoundingClientRect().left <= halfWdidth &&
s.getBoundingClientRect().right > halfWdidth
);
return index;
};
// find the next or previous section in the list
const getNextSection = (dir) => {
const sectionInViewIndex = getSectionInView();
const nextIndex = sectionInViewIndex + dir;
const numSections = sections.length;
const nextSectionIndex = nextIndex < 0 || nextIndex >= numSections ? sectionInViewIndex : nextIndex;
return sections[nextSectionIndex];
};
// animation function
const animateScroll = (dir) => {
const from = root.scrollLeft;
const { left } = getNextSection(dir).getBoundingClientRect();
return progress => root.scrollLeft = from + progress * left
};
previousPage.addEventListener("click", () => {
animate({
easing: "out-quintic",
change: animateScroll(-1)
});
});
nextPage.addEventListener("click", () => {
animate({
easing: "out-quintic",
change: animateScroll(1)
});
});
这是一个CodePen
为了使它起作用,您必须scroll-snap-align: center;
从section
样式中删除或将其设置none
为与动画冲突。