为什么 draggable=\"true\" 会阻止滚动？答案

【问题标题】：why draggable="true" prevents scrolling?为什么 draggable=\"true\" 会阻止滚动？
【发布时间】：2023-02-22 21:19:28
【问题描述】：

我有可拖动元素和可滚动容器，但我无法在拖动时滚动容器，为什么会这样？有没有办法在拖动时允许滚动？

.container{
  height: 300px;
  overflow: scroll;
  background: green
}
.draggable{
  background:red
}

<div class="container">
<p class="draggable" draggable="true"> draggable </p>

<div>qwerty</div>
<div>qwerty</div>
<div>qwerty</div>
<div>qwerty</div>
<div>qwerty</div>
<div>qwerty</div>
<div>qwerty</div>
<div>qwerty</div>
<div>qwerty</div>
<div>qwerty</div>
<div>qwerty</div>
<div>qwerty</div>
<div>qwerty</div>
<div>qwerty</div>
<div>qwerty</div>
<div>qwerty</div>
<div>qwerty</div>
<div>qwerty</div>
<div>qwerty</div>
<div>qwerty</div>
<div>qwerty</div>
<div>qwerty</div>
<div>qwerty</div>
<div>qwerty</div>
</div>

【问题讨论】：

标签： javascript html css

【解决方案1】：

当一个元素的 draggable 属性设置为“true”时，用户可以通过鼠标或触摸交互来移动它。当用户与元素交互时，浏览器需要确定用户是否打算移动元素或滚动页面。

默认情况下，当用户使用鼠标滚轮或触控板滑动或滚动时，浏览器会优先考虑滚动。但是，当元素具有 draggable="true" 时，浏览器会优先考虑元素的移动而不是滚动。这意味着如果用户与元素交互并尝试滑动或滚动，浏览器会将手势解释为尝试移动元素而不是滚动页面。

要防止此行为并允许滚动，您可以将 touch-action CSS 属性添加到值为 pan-y 或 auto 的元素。这告诉浏览器为该元素上的触摸交互优先考虑垂直滚动，同时仍然允许该元素可拖动。

例如：

<div draggable="true" style="touch-action: pan-y;">

  <!-- Element content here -->
</div>

【讨论】：