Сброс scroll-snap-type после установки на «none» не имеет никакого эффекта - PullRequest
Новая
       21

Сброс scroll-snap-type после установки на «none» не имеет никакого эффекта

0 голосов
/ 18 октября 2018

Последняя версия 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");
    }
});

Если мы этого не сделаем, анимация привязывается к каждому элементу в карусели, делая его очень резким, а не плавным.Итак, сначала мы отключаем CSS типа scroll-snap.Это прекрасно работает.Единственная проблема в том, что Chrome игнорирует инструкцию по восстановлению этого свойства до его первоначального значения!

Мне сказали, что это работает в Safari.

Любые мысли, решения, обходные пути будут приветствоваться!

1 Ответ

0 голосов
/ 18 октября 2018

Что ж, 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» для содержащихся элементов.Почему-то это работает.

...