능이 강타에 fullpage.js

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

문제

내가 사용하는 fullpage.js 플러그인에 대한 단일 페이지 마케팅 사이트입니다.

내가 사용하여 탐색하는 링크 이동하는 장면(모두 수평)사이트 주위에 그래서 나는 사용하지 않으려는 터치/와이프(사)기능을 방해하는 다른 터치 요소입니다.

었지만 모든 문서 그러나 나는 방법을 찾을 수 없습니다 이를 달성하기 위해.

어떤 도움을 환영합니다.감사,Jack.

도움이 되었습니까?

해결책

그냥 사용하는 옵션 autoScrolling:false 을 초기화 하는 경우 플러그인입니다.이 방법으로 마우스 휠지 않을 것 와이프와 어느 터치스 이벤트이다.

을 유지하려면 마우스 휠 스크롤(에 대한 컴퓨터)에 사용하지 않는 터치 이벤트(터치),그 다음 것이 좋습니다 당신을 초기화 플러그인에 대해 다른 방법을 터치 디바이스에 적합합니다.이렇게 하기 위하여,나는 당신을 추천하지 이 같은 뭔가.

업데이트 2016:

옵션을 사용할 수 있습니다. responsiveWidth 나 responsiveHeight 뿐만 아니라 클래스 fp-auto-height-responsive.

옵션 설정은 자동 스크롤 기능을 위해 모바일 장치에서 지정한 크기입니다.예제에서 사용할 수 있는 examples 폴더의 fullPage.js 나 온라인.

사용할 수도 있습니다 responsiveSlides 와 강제로 변화의 수평 수직 슬라이드 섹션에서는 반응이다.이를 통해 수행 할 수 있습니다 드 확장.

업데이트 월-2014:

방법 이름 $.fn.fullpage.setAllowScrolling 또한 사용될 수 있습과 이와 동일한 목적이다.그것은 모두 비활성화 터치 스크롤와 마우스크.


업데이트 월-2014:

autoScrolling:false 만 사용하지 않도록 설정되고,세로 스크롤합니다.당신이 원하는 경우에도 사용하지 않는 수평한 하나의 방법은 없을 것이다.을 수정할 필요가 조금 플러그인입니다.

안 fullpage.js 대체 this:

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 기능 안에 당신의 초기 설정입니다.

다른 팁

SetAllowsCrolling 함수는 방향에 대한 두 번째 인수를 허용하므로 다음을 사용하여 왼쪽 / 오른쪽 스크롤 / 스 와이프를 비활성화하는 데 사용할 수 있습니다.

$. fn.fullpage.setAllowsCrolling (false, '왼쪽, 오른쪽');

로 2017 년도 이전의 방법은 나를 위해 일했습니다.가장 간단한 방법을 효과적으로 설치는 다음과 같습니다.

에 jquery.fullPage.js 을 찾을 수 있는 기능 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'); 하지 않습니다.

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