Question

我的问题：

在我的项目中，有一个动画容器（名为.uebersicht），它引入了一些带有可滚动列表的div。动画在我的应用程序中的两个不同列表之间翻转（thanks 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 尝试滚动错误的容器（窗口元素）。

重现该错误：

使用MacBook / MagicPad / MagicMouse检查小提琴
集您的系统滚动方向为不自然
指向黄色容器并向下滚动
如果这行得通（有时），请移动并单击（在容器内部或外部），然后重试

似乎容器中有一个区域，滚动从不起作用。

为什么这是一个SO问题：

您可能会争辩说这是一个Safari错误，对SO没有任何帮助。但是，当我使用the animations from w3css（不幸的是没有翻转）时，滚动按预期工作。

此处评论的提示

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

问题仍然存在，因为我不能确保每个用户都将设置为 natural 而不是像我这样的 not natural 。

Answer 1

我发现了以下错误：MacBook Pro（15英寸，2016年）

Safari：版本12.0（14606.1.36.1.9）

我已将overflow: hidden添加到HTML, BODY，并且似乎可以正常工作。这可能与滚动时锁定主体有关，但不确定。

如果您通过添加

更新代码，我可以再次对其进行测试

html,body {
   overflow:hidden
}

Answer 2

要重现并正确跟踪此问题非常困难，但是在我的Mac上似乎可以使用的是在其他两个包装器router.get("/search", (req, res, next) =>{ const city = req.query.city; Facility.findAll(city) .select('name type mobile price streetName city state _id') .exec() .then(docs => { console.log("From database", docs); if (docs) { res.status(200).json({ facility: docs }); } else { res .status(404) .json({ message: "No valid entry found for provided City" }); } }) .catch(err => { console.log(err); res.status(500).json({ error: err }); }); });和overflow:hidden;上也添加id="item1"。这样，剩下的唯一要滚动的就是要滚动的div。我认为值得一试。

MacBook Pro（15英寸视网膜，2013年初）-OS 10.14.1- Safari版本12.0.1版。 -触控板自然而非自然

希望获得帮助。

Answer 3

最后，在这里发表了一些好评之后，我找到了一个解决方案，但它很可能是一种解决方法（感谢您的输入）。

我玩了一些capturing，bubbling和capture。滚动似乎向下滚动到滚动元素（.styleWrap .scrollable），但没有再次冒起。听滚动事件，并通过JS向正确的方向滚动，直到DOM解除阻塞变得复杂为止。但是，如果我修改滚动元素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);的样式（位置/大小），阻塞就消失了！

之后，事实证明，在动画结束后修改此元素时，它可以防止Safari受到任何阻止。

因此，我的解决方法是进行样式更改，并在CSS动画完成后还原该样式-和voilà：

w3css

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

您可以在此处进行测试（我在SELECT * FROM [Table] WHERE EXISTS ( SELECT * FROM (VALUES (Date1),(Date2),(Date3),(Date4)) v (TheDate) WHERE TheDate BETWEEN x AND y )中添加了更多像素，以使其在此处更可见）：http://fiddle.bplaced.net/52426221g/

我对此解决方案不满意100％，因为：

这是一个用JS解决的CSS问题
您需要了解动画的时间安排（可能会因设计而异）

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

动画列表上的MacBooks触控板无法滚动

我的问题：

重现该错误：

为什么这是一个SO问题：

此处评论的提示

3 个答案: