如何在Mac上防止Safari拖动滚动？

Question

请看this codepen
角落里有一个红色的正方形。

如果你点击（使用鼠标或触摸板）这个正方形并向下拖动 - 在Mac上的Safari中，.parent元素将向下滚动。
即使.parent具有overflow-y: hidden;

在所有其他浏览器中都没有滚动。
我如何防止Safari滚动？ 作为一个粗略的解决方案，我可以监听滚动并覆盖scrollTop，如果它不是零，但也许有更优雅的解决方案？

- Denis

---

嗨，丹尼斯，请在你有时间的时候看一下我的解决方案。 - Brandon McConnell

Answer 1

您可以添加一个中间的 div，然后将宽度、高度和溢出属性设置给它。

.parent {
  width: 200px;
  height: 200px;
  border: 1px dashed black;
  overflow-x: auto;
  overflow-y: hidden;
}

/** intermediary div */
.parent > div {
  width: 200%;
  height: 100%;
  overflow: hidden;
}

.child {
  width: 100%; /** this should be 100% **/
  height: 200%;
  background: linear-gradient(to right bottom, red, tomato), linear-gradient(to bottom, white, black);
  background-size: 50px 50px, 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

<div class="parent">
  <div>
    <div class="child"></div>
  </div>
</div>

或者在父元素中添加 pointer-events:none。

.parent {
  /* This prevents dragging */
  pointer-events: none;
  width: 200px;
  height: 200px;
  border: 1px dashed black;
  overflow-x: auto;
  overflow-y: hidden;
}
.child {
  width: 200%;
  height: 200%;
  background: linear-gradient(to right bottom, red, tomato), linear-gradient(to bottom, white, black);
  background-size: 50px 50px, 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

<div class="parent">
  <div class="child"></div>
</div>

- Moorthy G

---

第一种解决方案很不错，虽然有点hacky，但几乎只用了CSS。 - Denis

我为第二个解决方案纠正了一个打字错误 pointer-event ➞ pointer-events。对于我来说，第二个解决方案仍然似乎不起作用，但第一个解决方案非常好。我最喜欢你的第一个解决方案的一点是它实际上并没有阻止在x轴上进行拖动滚动，而只是在框架外部进行拖动滚动，例如在这种情况下是在y轴上。做得好！ - Brandon McConnell

啊，谢谢指出！第二个解决方案不起作用，因为我已经将 pointer-events: auto 应用到了子元素上。我现在已经将其删除了。如果后代元素不需要交互，则可以使用此方法。 - Moorthy G

Answer 2

这绝对是一个有趣的发现！你可能认为这是不可能的，因为你将 overflow-y 设置为 none。然而，你可以使用以下 JavaScript 阻止此行为并禁止在父元素内进行点击：

const parent = document.querySelector('.parent');
parent.addEventListener('mousedown', e => e.preventDefault());

通过在 mousedown 触发的事件中添加 preventDefault()，您可以防止浏览器评估任何与该点击相关的进一步事件，包括拖动。 在这里它的作用：

const parent = document.querySelector('.parent');
parent.addEventListener('mousedown', e => e.preventDefault());

.parent {
  width: 200px;
  height: 200px;
  border: 1px dashed black;
  overflow-x: auto;
  overflow-y: hidden;
}

.child {
  width: 200%;
  height: 200%;
  background: linear-gradient(to right bottom, red, tomato), linear-gradient(to bottom, white, black);
  background-size: 50px 50px, 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

<div class="parent">
  <div class="child"></div>
</div>

- Brandon McConnell

---

你好，谢谢。这是一个很好的解决方案，比检查和覆盖scrollTop更好。让我们再等几天，如果没有更好的想法，我会接受这个答案。 - Denis

@Denis 谢谢！如果你还有其他需要我添加的内容，请告诉我，或者你只是在等待看看是否有纯CSS的解决方案？我也非常想看到这样的解决方案。 - Brandon McConnell

Answer 3

使用CSS可以给予pointer-events:none;，从而在点击时避免任何事件的发生。

- Prinju Koshy Vaidyan

---

我需要它水平滚动，这就是为什么在示例中有一个overflow-x: auto的原因。 - Denis