Adobe Indesign- 웹 콘텐츠 오버레이 - 스크롤 이벤트 버블 링 방지

StackOverflow https://stackoverflow.com/questions/19834729

문제

웹 컨텐츠 오버레이가 포함 된 Indesign 잡지가 있습니다 (반응 형 웹 사이트를 가리 킵니다). 스크롤과 관련하여 모든 것이 잘 작동합니다.

수직 스크롤 (위와 아래) 만 필요하며 수평은 필요하지 않습니다.

문제

사용자가 왼쪽 또는 오른쪽으로 스 와이프하면 잡지의 페이지가 변경되고 웹 콘텐츠가 닫힙니다.

의문

스크롤 이벤트가 웹 콘텐츠 오버레이에서 잡지로 전파되는 것을 방지 할 수있는 방법이 있습니까? 바람직하게는 웹 컨텐츠 자체 (예 : JavaScript 사용)에서 이루어질 수 있습니다. 각 페이지에서 웹 컨텐츠가 표시되는 대신 한 위치에서만 편집하면됩니다.

시도했다

  • 잡기 touchmove 페이지의 본문과 호출 이벤트 stopPropagation() 그 위에.
  • 부름 preventDefault() 이벤트에서 (이것은 스크롤을 전혀 중지합니다).
  • pagex를 사용합니다 touchmove 이벤트 및 전화 preventDefault() 수평 스 와이프로 보이는 모든 것 (너무 신뢰할 수없는).
  • CSS 사용 overflow-x: hidden
  • JQuery Mobile의 맞춤형 스크롤 이벤트.
  • 위의 몇 가지 조합.
도움이 되었습니까?

해결책

해결책을 찾았습니다. 먼저 삽입 a <meta> viewport 머리에 태그 :

<meta name="viewport" content="width=701, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0, user-scalable=no" />

정적 너비를 설정했습니다 701, 이건 중요하다. 웹 콘텐츠 오버레이 너비는입니다 700px. 너비를 설정합니다 701 페이지가 약간 움직일 수 있음을 의미합니다. 이 흔들림은 스 와이프 왼쪽/오른쪽이 잡히고 Indesign까지 여과되지 않음을 의미합니다. 스 와이프하는 경우 약간의 변화 (픽셀에 의해)가 있지만 페이지 변경 페이지에 비해 미미합니다.

다음으로 컨텐츠에 다음 CSS를 추가하십시오.

.content {
    -webkit-overflow-scrolling: touch
}

이 CS가 필요하지 않을 수도 있지만 우리에게는 필요했습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top