adobe Indesign - تراكب محتوى الويب - منع التمرير الفقاعات أحداث

Question

لقد حصلت على مجلة Indesign التي تحتوي على تراكب محتوى ويب (مشيرًا إلى موقع ويب سريع الاستجابة). كل شيء يعمل بشكل جيد عن عندما يتعلق الأمر بالتمرير.

مطلوب فقط التمرير الرأسي (لأعلى ولأسفل) ، أفقي ليس كذلك.

مشكلة

عندما يمرد المستخدم إلى اليسار أو اليمين ، تتغير صفحة المجلة وتغلق محتوى الويب.

سؤال

هل هناك أي طريقة يمكنني منع أحداث التمرير من الانتشار إلى المجلة من تراكب محتوى الويب؟ على نحو مفضل ، سيتم القيام بذلك من محتوى الويب نفسه (على سبيل المثال باستخدام JavaScript) لأنه يعني أنه يجب علي فقط التعديل في مكان واحد ، بدلاً من عرض محتوى الويب في كل صفحة.

حاول

• اصطياد touchmove الحدث على جسم الصفحة والاتصال stopPropagation() عليه.
• الدعوة preventDefault() في الحدث (هذا يوقف أي تمرير على الإطلاق).
• باستخدام pagex على touchmove الأحداث والاتصال preventDefault() على أي شخص يتطلع إلى الضربات الأفقية (غير موثوق بها للغاية).
• باستخدام CSS overflow-x: hidden
• أحداث التمرير المخصصة لـ JQuery Mobile.
• عدد قليل من مجموعات ما سبق.

Answer 1

وجدت حل. أولا ، أدخل أ <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 ، لكنها كانت ضرورية بالنسبة لنا.