css - 设置为 "none"后重新设置 scroll-snap-type 无效

Question

Chrome 的最新版本 69 现在支持 scroll-snap-type，但显然不是很好。

原始 CSS:

    .carousel {
        scroll-snap-type: x mandatory;
    }

使用 jQuery 动画转换:

$(".carousel").css("scroll-snap-type", "none");
$(".carousel").animate({
    scrollLeft : 1000,
}, {
    complete : function() {
        // fail:
        $(".carousel").css("scroll-snap-type", "x mandatory");
    }
});

如果我们不这样做，那么动画会捕捉到轮播中的每个元素，使其看起来非常不稳定，不流畅。因此，我们首先禁用 scroll-snap-type CSS。这很好用。唯一的麻烦是，Chrome 忽略了将此属性重新设置为其原始值的指令!

有人告诉我这在 Safari 中有效。

欢迎提出任何想法、解决方案和解决方法!

Answer 1

嗯，Chrome 有很多问题，但至少我们有一个解决方法:

新的 CSS:

        .item-carousel {
            scroll-snap-type: x mandatory;
        }

        .snap {
            scroll-snap-align: start;   
            scroll-snap-stop: always;
        }

新的 HTML:

<div class="item-carousel">
    <div class="item snap" >
        ...
    </div>
</div>

和新的 JS:

$(".item").removeClass("snap");
$(".item-carousel").animate({
    scrollLeft : 1000,
}, {
    complete : function() {
        $(".item").addClass("snap");
    },
});

新的想法是，不是在容器上操作 scroll-snap-type 属性，而是在包含的元素上添加和删除“snap”类。不知何故，这行得通。