小编Mic*_*l P的帖子

我的问题:

在我的项目中,有一个动画容器(命名.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滚动等.不会触发滚动事件

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