如何在点击时终止iOS滚动动画 解决侧边栏无法正常唤起问题

问题根因 #

iOS Safari 自带的惯性滚动（动量滚动）效果持续期间，scroll 事件会持续触发，同时系统会优先响应滚动动画，导致点击菜单按钮触发的显示逻辑，会被后续触发的scroll事件的隐藏逻辑覆盖，无法正常唤起侧边栏。

解决方案 #

1. 点击菜单时强制终止iOS惯性滚动 #

直接给滚动容器（代码中为#Content）的scrollTop赋值为当前滚动位置，即可立刻终止iOS的惯性滚动动画，不会再继续触发后续的scroll事件。

2. 增加操作锁避免逻辑冲突 #

新增状态变量，点击菜单后的短时间内屏蔽滚动事件的隐藏逻辑，避免刚触发的显示逻辑被误覆盖。

修改后的完整JS代码如下：

// 新增滚动事件锁
let scrollDisable = false

$(".button.is-menu").click(function (e) {
    // 强制终止#Content的惯性滚动
    const content = $('#Content')[0]
    content.scrollTop = content.scrollTop

    // 加锁，300ms内不响应滚动隐藏逻辑
    scrollDisable = true
    setTimeout(() => {
        scrollDisable = false
    }, 300)

    $(".a").removeClass("closed");
    setTimeout(() => {
        $(".a").addClass("slide-in");
    }, 128);
});

$("#Content").scroll(function () {
    // 加锁期间直接返回，不执行隐藏逻辑
    if (scrollDisable) return

    $(".a").removeClass("slide-in");
    setTimeout(() => {
        $(".a").addClass("closed");
    }, 128);
});

内容的提问来源于stack exchange，提问作者Kelvin