오버플로 (GSAP)가있는 드래그 가능한 텍스트 요소

Question

Codepen에서 텍스트가 포함 된 항목의 드래그 가능한 목록을 만들려고합니다. 콘텐츠를 스크롤 할 수 있도록 각 항목의 크기는 overflow: auto이어야합니다. 그러나 Chrome의 터치 장치에서는 포인터 이벤트가 항목에 걸려서 부드럽게 끌리지 않습니다.

복제하려면 Chrome에서 실행하고 개발 도구를 통해 반응 형 모드로 전환하십시오. 요소간에 드래그하면 예상대로 작동하지만 요소를 드래그하면 올바르게 작동하지 않습니다.

나는 다양한 드래그 가능한 옵션을 시도하고 플렉스 박스없이 레이아웃을 시도했지만 아무 것도 작동하지 않는 것 같습니다. 나는 또한 오버 플로우를 설정하는 drag/not-dragging css 클래스를 토글하려고 시도했다. hidden/auto이지만 필요한 효과는 없다.

https://codepen.io/motionimaging/pen/efbf92943645bf108e720c9b7b640abd#0

Answer 1

덕분에 대답을 @jack합니다. 자세한 내용은 여기를 참조하십시오 : https://greensock.com/forums/topic/17546-draggable-text-elements-with-overflow/

이것은 브라우저 버그 인 것 같습니다. 내 경우에는 내가 내용을 스크롤 할 수없는에서 touch-action: none; 결과를 사용하는 등

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

를 사용하여 고정. pan-y은 움직임을 y 축에만 제한합니다. 즉, 방해받지 않고 왼쪽에서 오른쪽으로 끌 수 있음을 의미합니다.