нет прокрутки с трекпадом MacBooks в (ранее) анимированных списках

Question

Моя проблема:

В моем проекте есть анимированный контейнер (с именем .uebersicht), который вводит некоторые элементы div с прокручиваемым списком.Анимация переворачивается ( благодаря Дэвиду Уолшу ) между двумя различными списками в моем приложении.Поскольку оба они должны быть прокручиваемыми, я должен щелкнуть и выбросить перевернутый контейнер.

Я упростил свою разметку и CSS и сделал скрипку - но скрипка работает правильно: D (возможно, хороший след...) Поэтому я поместил его на хостинг.

• site (прокрутка не работает): http://fiddle.bplaced.net/52426221/
• fiddel (тот же код, работает, как и ожидалось): https://jsfiddle.net/58omteyL/5/

Тем не менее, для лучшего понимания я визуализирую свою проблему:

(если вам интересно узнать о разных контейнерах, они важныдля остальной части приложения)

Мой подход хорошо работает с сенсорным и мышиным взаимодействием, но трекпад Mac (как тот в MacBook) и возможно (не мог проверить это) волшебная панель и волшебствомышь на Mac просто может прокручивать контейнер каждый 2/3/4 раз.

Кажется, что Safari 12.0 под MacOS 10.13.6 пытается прокрутить не тот контейнер (window-element).

Воспроизвести ошибку:

1. проверьте скрипку с MacBook / MagicPad / MagicMouse
2. установите направление прокрутки вашей системы на не натуральное
3. и укажите в желтом контейнере и прокрутите вниз
4. если это работает (иногда), переместите и щелкните вокруг (внутри или снаружи контейнера) и попробуйте снова

Кажется, что в контейнере есть область, где прокрутка никогда не работает.

Почему это SO Вопрос:

Можно утверждать, что это ошибка Safari и ничего для SO.Но когда я использую анимации из w3css (к сожалению, нет переворота), прокрутка работает как ожидалось.

---

Подсказки из комментариев здесь

• Когда div прокручивается вверх и вы прокручиваете вверх, фокус переходит к родителю, и вам нужно поднять пальцы, прежде чем вы сможете прокрутить вниз
• Моя настройка трекпада не естественно (проведите вниз = прокрутите вниз) изменив эти настройки на естественный (проведите вверх = прокрутите вниз, это стандартно), чтобы мой пример работал
• Когда прокрутка заблокирована, вы даже не сможетепрокручивайте с помощью js, используя scrollTo и т. д. Событие прокрутки не вызывается

Вопрос остается тем же, поскольку я не могу гарантировать, что у каждого пользователя есть настройка natural , а не не естественно как я.

Answer 1

Очень трудно воспроизвести и правильно отследить проблему, но, похоже, она работает на моем Mac, так как добавляет overflow:hidden; также к двум другим оболочкам id="item1" и class="content".Таким образом, единственное, что остается для прокрутки - это div, который вы хотите прокрутить.Я думаю, что стоит попробовать.

MacBook Pro (Retina, 15-дюймовый, начало 2013 г.) - ОС 10.14.1 - версия Safari Версия 12.0.1.- трекпад естественный и не естественный

Надеюсь, это поможет.

Answer 2

Наконец, после нескольких хороших комментариев, я нашел решение, но это скорее обходной путь (спасибо за ваш вклад).

Я поиграл с некоторыми eventListeners, capturing и bubbling,Кажется, что прокрутка идет вниз к элементу прокрутки (capture), но больше не всплывает.Слушайте событие прокрутки и прокручивайте через JS в правильном направлении, пока DOM не разблокируется.Но если я изменяю стиль (положение / размер) элемента прокрутки .styleWrap .scrollable, блокировка исчезла!

После этого выясняется, что Safari блокирует любые блокировки, когда я изменяю этот элемент после анимации.готово.

Итак, мой обходной путь - изменить стиль и вернуть его после завершения анимации CSS - и вуаля:

function slide(slideName){
    // scroll to top
    scroll(0,0);
    // show the Slide
    var slideElement = document.getElementById(slideName);
        slideElement.classList.add('show');
}

setTimeout(function(){
    slide('item1');

    // make a change to be able to revert this change
    var scrollDiv = document.querySelector(".scrollable");
    scrollDiv.style.top = "1px";

    // change some style (reset the prev. change)
    setTimeout(function(){
        document.querySelector(".scrollable").style.top = "";
    }, 1300 + 10); // CSS animation time + 10ms

}, 100);

Может быть, именно поэтому w3cssанимация не приводит к блокировке ...

Вы можете проверить это здесь (я добавляю больше пикселей к top, чтобы сделать его более заметным здесь) : http://fiddle.bplaced.net/52426221g/

Я не на 100% удовлетворен этим решением, потому что:

• это проблема CSS, решаемая с помощью JS
• , вам нужно знать анимациювремя (которое может меняться в зависимости от дизайна)

Поэтому я хотел бы изменить принятый ответ, если есть решение CSS

Answer 3

У меня ошибка: MacBook Pro (15 дюймов, 2016 г.)

Safari: версия 12.0 (14606.1.36.1.9)

Я добавил overflow: hidden в HTML, BODY и, кажется, работает.Это может быть связано с блокировкой тела во время прокрутки, но не уверен.

Я могу проверить это снова, если вы обновите код, добавив

html,body {
   overflow:hidden
}