تعطيل اللمس انتقاد على صفحة كاملة.شبيبة

Question

أنا باستخدام صفحة كاملة.شبيبة المساعد لموقع التسويق صفحة واحدة.

أستخدم روابط التنقل للانتقال إلى المشاهد (كلها أفقية) حول الموقع ، لذا أريد تعطيل ميزة اللمس/التمرير (بين المشاهد) لأنها تتداخل مع عناصر اللمس الأخرى.

لقد كنت على الرغم من جميع الوثائق ولكن لا يمكنني معرفة كيفية تحقيق ذلك.

أي مساعدة هو موضع ترحيب.شكرا ، جاك.

Answer 1

فقط استخدم الخيار autoScrolling:false عند تهيئة البرنامج المساعد.وبهذه الطريقة سوف عجلة الماوس لا انتقد ولا الأحداث التي تعمل باللمس سوف.

إذا كنت ترغب في الاحتفاظ بتمرير عجلة الماوس (لأجهزة الكمبيوتر) ولكن مع تعطيل أحداث اللمس (الأجهزة التي تعمل باللمس) ، فإنني أوصيك بتهيئة المكون الإضافي بطريقة مختلفة للأجهزة التي تعمل باللمس.من أجل القيام بذلك ، أنصحك أن تفعل شيء من هذا القبيل.

تحديث 2016:

يمكنك استخدام الخيارات responsiveWidth أو responsiveHeight وكذلك الطبقة fp-auto-height-responsive.

ستعمل الخيارات على تعطيل ميزة التمرير التلقائي للأجهزة المحمولة تحت الأبعاد المحددة.الأمثلة المتاحة في examples مجلد صفحة كاملة.شبيبة أو على الانترنت.

يمكنك أيضا استخدام responsiveSlides وإجبار تحويل الشرائح الأفقية إلى أقسام رأسية على الاستجابة.يمكن القيام بذلك من خلال تمديد الشرائح المستجيبة.

تحديث سبتمبر-2014:

---

طريقة تسمى $.fn.fullpage.setAllowScrolling ويمكن أيضا أن تستخدم مع هذا الغرض نفسه.فإنه سيتم تعطيل كل من التمرير التي تعمل باللمس والتمرير الماوس.

تحديث يونيو-2014:

---

autoScrolling:false تعطيل التمرير الرأسي فقط.إذا كنت تريد أيضا تعطيل الأفقي ، فلا توجد طريقة للقيام بذلك الآن.سوف تحتاج إلى تعديل قليلا البرنامج المساعد.

داخل صفحة كاملة.شبيبة يستبدل هذا:

function removeTouchHandler() {
    if (isTablet) {
        $(document).off('touchstart MSPointerDown');
        $(document).off('touchmove MSPointerMove');
    }
}

لهذا:

$.fn.fullpage.removeTouchHandler = function (){ 
    if (isTablet) {
        $(document).off('touchstart MSPointerDown');
        $(document).off('touchmove MSPointerMove');
    }
};

وبعد ذلك ، عند تهيئة البرنامج المساعد ، استدعاء هذه الوظيفة العامة في afterRender رد مثل ذلك:

$(document).ready(function() {
    $('#fullpage').fullpage({
        afterRender: function(){
            $.fn.fullpage.removeTouchHandler();
        }
    });
});

لا تتصل بالصفحة الكاملة مرتين.فقط إضافة afterRender وظيفة داخل التهيئة الخاصة بك.

Answer 2

وظيفة setallowscrolling تقبل أيضا الوسيطة الثانية للإرشادات حتى ما يلي يمكن استخدامها لتعطيل التمرير الأيمن / الأيمن:

$. fn.fullpage.setallowscrolling (خطأ، "يسار، يمين")؛

Answer 3

اعتبارا من يونيو 2017 ، لم تنجح أي من الطرق السابقة بالنسبة لي.إن أبسط طريقة وجدتها لتعطيل اللمس بشكل فعال هي كما يلي.

في مسج.صفحة كاملة.شبيبة سوف تجد وظيفة setAllowScrolling

function setAllowScrolling(value, directions){
    if(typeof directions !== 'undefined'){
        directions = directions.replace(/ /g,'').split(',');

        $.each(directions, function (index, direction){
            setIsScrollAllowed(value, direction, 'm');
        });
    }
    else if(value){
        setMouseWheelScrolling(true);
        addTouchHandler();
    }else{
        setMouseWheelScrolling(false);
        removeTouchHandler();
    }
}

عندما يتم تهيئة صفحة كاملة فإنه يدعو تلقائيا setAllowScrolling(true), ، مما اثار else if(value) الشرط أعلاه.ببساطة التعليق على الدعوة إلى addTouchHandler() لتعطيله بالكامل ، أو إضافة نوع من الشرط ليتم استدعاؤه ، على سبيل المثال

var winw = $(window).width();
if (winw > 480){
    addTouchHandler();
} 

باستخدام هذه الطريقة ، لا يزال السهمان الأيمن والأيسر يعملان عند النقر عليهما ، لذلك لا يزال من الممكن التنقل في الشرائح الأفقية.وتجدر الإشارة إلى أن استخدام $.fn.fullpage.setAllowScrolling(false, 'left, right'); سيتم أيضا تعطيل الأسهم.