跳过主要内容

停止过度滚动行为,甚至在 iOS Safari 上也是如此。

它应该像设置overscroll-behavior: none在你的CSS中,但iOS Safari不会配合!所以这里有一个可以帮助停止过度滚动行为的函数:

function stopOverscroll(element) {
element = gsap.utils.toArray(element)[0] || window;
(element === document.body || element === document.documentElement) &&
(element = window);
let lastScroll = 0,
lastTouch,
forcing,
forward = true,
isRoot = element === window,
scroller = isRoot ? document.scrollingElement : element,
ua = window.navigator.userAgent + "",
getMax = isRoot
? () => scroller.scrollHeight - window.innerHeight
: () => scroller.scrollHeight - scroller.clientHeight,
addListener = (type, func) =>
element.addEventListener(type, func, { passive: false }),
revert = () => {
scroller.style.overflowY = "auto";
forcing = false;
},
kill = () => {
forcing = true;
scroller.style.overflowY = "hidden";
!forward && scroller.scrollTop < 1
? (scroller.scrollTop = 1)
: (scroller.scrollTop = getMax() - 1);
setTimeout(revert, 1);
},
handleTouch = (e) => {
let evt = e.changedTouches ? e.changedTouches[0] : e,
forward = evt.pageY <= lastTouch;
if (
((!forward && scroller.scrollTop <= 1) ||
(forward && scroller.scrollTop >= getMax() - 1)) &&
e.type === "touchmove"
) {
e.preventDefault();
} else {
lastTouch = evt.pageY;
}
},
handleScroll = (e) => {
if (!forcing) {
let scrollTop = scroller.scrollTop;
forward = scrollTop > lastScroll;
if (
(!forward && scrollTop < 1) ||
(forward && scrollTop >= getMax() - 1)
) {
e.preventDefault();
kill();
}
lastScroll = scrollTop;
}
};
if ("ontouchend" in document && !!ua.match(/Version\/[\d\.]+.*Safari/)) {
addListener("scroll", handleScroll);
addListener("touchstart", handleTouch);
addListener("touchmove", handleTouch);
}
scroller.style.overscrollBehavior = "none";
}

用法

stopOverscroll();

// or specify an element
stopOverscroll("#viewport");

目录

无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗