没有在(先前)动画列表上滚动MacBooks触控板

Question

我的问题:

在我的项目中,有一个动画容器(命名.uebersicht),它带来了一些带有可滚动列表的div.动画在我的应用程序中的两个不同列表之间翻转(感谢david walsh).因为它们都应该是可滚动的,所以我必须翻转并踢掉翻转的容器.

我已经简化了我的标记和CSS并制作了一个小提琴 - 但小提琴正常工作:D(也许是一个很好的痕迹...)所以我把它放在托管服务上.

• 网站(滚动不工作):http://fiddle.bplaced.net/52426221/
• fiddel(相同代码,按预期工作):https://jsfiddle.net/58omteyL/5/

然而,为了更好地理解我可视化我的问题:

(如果你想知道不同的容器,它们对应用程序的其余部分很重要)

我的方法在触摸和鼠标交互方面运行良好,但Mac触控板(就像MacBook中的那个)并且可能(无法测试)Mac上的魔术垫和魔术鼠标只能每隔2/3/4滚动容器时间.

似乎MacOS 10.13.6下的Safari 12.0试图滚动错误的容器(window-element).

重现错误:

1. 看看MacBook/MagicPad/MagicMouse的小提琴
2. 将系统滚动方向设置为不自然
3. 指向黄色容器并向下滚动
4. 如果这有效(有时)移动并点击(容器内部或外部)并再试一次

似乎容器中有一个区域滚动永远不会起作用.

为什么这是一个SO问题:

你可能会认为这是一个Safari bug而且没什么可以的.但是当我使用来自w3css的动画时(遗憾的是没有翻转)滚动按预期工作.

---

来自这里评论的提示

• 当div滚动到顶部并向上滚动时,焦点将转移到父级,您必须抬起手指才能向下滚动
• 我的触控板设置不自然(向下滑动=向下滚动)将这些设置更改为自然(向上滑动=向下滚动,这是标准的)使我的示例工作
• 当滚动被阻止时,您甚至无法使用js scrollTo滚动等.不会触发滚动事件

问题保持不变,因为我不能确保每个用户都有自然的设置,而不是像我一样自然.

Answer 1

最后，经过一些好的评论后，我找到了一个解决方案，但它更有可能是一个解决方法（感谢您的输入）。

\n\n

我玩过一些eventListeners，capturing并且bubbling。似乎滚动向下滚动到滚动元素 ( capture)，但不再向上冒泡。监听滚动事件并通过 JS 向正确的方向滚动，直到 DOM 被解锁，这变得很复杂。但是如果我修改滚动元素的样式（位置/大小），.styleWrap .scrollable阻塞就消失了！

\n\n

之后，当我在动画完成后修改此元素时，它会阻止 Safari 发生任何阻塞。

\n\n

所以我的解决方法是进行样式更改并在 CSS 动画完成后恢复样式 - 瞧\xc3\xa0 ：

\n\n

function slide(slideName){\n    // scroll to top\n    scroll(0,0);\n    // show the Slide\n    var slideElement = document.getElementById(slideName);\n        slideElement.classList.add(\'show\');\n}\n\nsetTimeout(function(){\n    slide(\'item1\');\n\n    // make a change to be able to revert this change\n    var scrollDiv = document.querySelector(".scrollable");\n    scrollDiv.style.top = "1px";\n\n    // change some style (reset the prev. change)\n    setTimeout(function(){\n        document.querySelector(".scrollable").style.top = "";\n    }, 1300 + 10); // CSS animation time + 10ms\n\n}, 100);\n

\n\n

w3css也许这就是动画不会导致阻塞的原因......

\n\n

您可以在这里测试它（我添加更多的 px 以top使其在这里更明显）：http://fiddle.bplaced.net/52426221g/

\n\n

我对这个解决方案不是 100% 满意，因为：

\n\n

\n
• 这是一个用JS解决的CSS问题
\n
• 您需要知道动画时间（可以随设计而改变）
\n

\n\n

因此，如果有 CSS 解决方案，我想更改接受的答案

\n