2013-11-07 3 views
0

У меня есть журнал InDesign, который содержит наложение веб-содержимого (указывающий на отзывчивый веб-сайт). Все работает отлично, когда дело доходит до прокрутки.Adobe InDesign - наложение веб-содержимого - предотвращение прокрутки события Bubbling

Требуется только вертикальная прокрутка (вверх и вниз), горизонтальная - нет.

Проблема

Когда пользователь пойло влево или вправо, страница изменения журнала и веб-контент закрывается.

Вопрос

Есть ли способ, что я могу предотвратить событие прокрутки от распространяющихся до журнала из наложения веб-контента? Предпочтительно, это будет сделано из самого веб-контента (например, с использованием JavaScript), поскольку это означало бы, что мне нужно было бы редактировать только в одном месте, а не на каждой странице, показываемой веб-контентом.

Покушение

  • Ловля touchmove события на теле страницы и вызов stopPropagation() на него.
  • Вызов preventDefault() на событие (это вообще останавливает прокрутку).
  • Использование pageX на touchmove событиях и вызове preventDefault() на любых изображениях, которые выглядят горизонтальными (слишком ненадежными).
  • Использование CSS overflow-x: hidden
  • Пользовательские события прокрутки jQuery Mobile.
  • Еще несколько комбинаций из вышеперечисленного.

ответ

0

Нашли решение. Во-первых, вставить <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 
} 

Вам не нужно это CSS, но это было необходимо для нас.