如何在单击时停止 iOS 滚动动画答案

【问题标题】：How to stop iOS scrolling animation on clicked如何在单击时停止 iOS 滚动动画
【发布时间】：2021-10-30 02:42:21
【问题描述】：

我在 iOS 上遇到了问题。

如何在点击时停止 iOS 滚动动画。

我有一个侧边栏，点击显示，滚动时隐藏。但是在iOs中，当滚动动画没有结束时，它不能显示div。

默认 .is-sort、.is-search、.is-filter 是隐藏的。

点击.is-menu，然后.is-sort、.is-search、.is-filter将显示。

滚动.is-menu 然后.is-sort、.is-search、is-filter 将隐藏。

那么有什么办法让它发挥作用吗？

JS 下面

$(".button.is-menu").click(function (e) {
    $(".a").removeClass("closed");

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

$("#Content").scroll(function () {
    $(".a").removeClass("slide-in");

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

下面的 HTML

<div class="a closed">
    <button class="button is-cart">
        <i class="mdi mdi-cart"></i>
    </button>
    <button class="button is-sort">
        <i class="mdi mdi-sort"></i>
    </button>
    <button class="button is-search">
        <i class="mdi mdi-magnify"></i>
    </button>
    <button class="button is-filter">
        <i class="mdi mdi-filter"></i>
    </button>

    <button class="button is-menu">
        <i class="mdi mdi-menu"></i>
    </button>
</div>

【问题讨论】：

你有.a类或.closed和.slide-in类的动画吗？有一段时间，.a 元素上既没有滑入也没有关闭。我猜在这段时间里，关闭关闭，触发滚动，它移除滑入，然后滑入由第一个函数添加，然后关闭由第二个添加。我敢打赌，如果你检查元素，点击然后滚动后，两个类都在元素上。它可能会级联滑入状态。
例如...用户点击->关闭被移除->用户滚动->滑入被移除->滑入被添加->关闭被添加。

标签： javascript html jquery css ios

【解决方案1】：

要解决我上面评论的问题，您可以确保在匿名函数中重置状态，如下所示：

    $(".a").removeClass("closed");

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

$("#Content").scroll(function () {
    $(".a").removeClass("slide-in");

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

添加额外的 removeClass 不会造成任何伤害，但会保证即使用户在 128 毫秒内执行了某项操作，也能正确设置状态。

【讨论】：