带有溢出的可拖动文本元素 (GSAP)答案

【问题标题】：Draggable text elements with overflow (GSAP)带有溢出的可拖动文本元素 (GSAP)
【发布时间】：2023-04-07 21:03:01
【问题描述】：

在 Codepen 中，我试图制作一个可拖动的包含文本的项目列表。每个项目必须有overflow: auto，以便内容可以滚动。但是，在 Chrome 中的触摸设备上，指针事件会被项目捕获并且不能顺利拖动。

要复制，请在 Chrome 中启动并通过开发工具进入响应模式。在元素之间拖动按预期工作，但在元素上拖动无法正常工作。

我尝试了各种可拖动的选项，也尝试了不使用 flexbox 进行布局，但似乎都不起作用。我还尝试切换设置 overflow:hidden / auto 的拖动/不拖动 css 类，但这没有所需的效果。

【问题讨论】：

我相信 GreenSock 论坛已经回答了这个问题：greensock.com/forums/topic/… 似乎是一个 Chrome 错误，但您可以通过在这些元素上设置 touch-action: none 来解决这种情况。

标签： gsap

【解决方案1】：

这似乎是一个浏览器错误。就我而言，我使用

修复了它

.item {
  touch-action: pan-y;
}

使用touch-action: none; 会导致无法滚动内容。 pan-y 仅将移动限制在 y 轴，这意味着您可以不受阻碍地从左向右拖动。

【讨论】：