모바일에서 Skrollr를 어떻게 비활성화 할 수 있습니까?

Question

너비가 640px보다 작은 화면에서 skrollr을 사용하지 않으려합니다. 모바일/태블릿에는 기본적으로 애니메이션이 없습니다. 이 시도했는데 https://github.com/Prinzhorn/skrollr/issues/350하지만 작동하지 않습니다.

Answer 1

나는 그것을 그렇게했다! 나는 금주 모임 jQuery를 사용했습니다

var tomCS = {}; 

$(document).ready(function() { 
    // Check the width of the screen 
    tomCS.winW = $(window).width(); 
    // Check if it's a touch screen (based on Modernizr) - Remove if it if you want  
    tomCS.isTouch = false; 
    if($('.touch')[0]){ 
     tomCS.isTouch = true; 
    } 
    // If the size of the screen is lower or equal to 767, we are on a mobile device 
    tomCS.isMobile = false; 
    if(tomCS.winW <= 767){ 
     tomCS.isMobile = true; 
    } 
    // If we are not on a mobile device, initiate skrollr 
    if (!tomCS.isMobile){ 
     tomCS.s = skrollr.init({forceHeight: true}); 
    } 
}); 

// Disable or enable skrollr on window resize 
$(window).resize(function(){ 
    console.log("RESIZE"); 
    tomCS.winW = $(window).width(); 
    if(tomCS.winW <= 767){ 
     console.log("MOBILE"); 
     tomCS.isMobile = true; 
     if($('.skrollable')[0]){ 
     tomCS.s.destroy(); 
     } 
    } else { 
     console.log("NOT MOBILE"); 
     if(!$('.skrollable')[0]){ 
     tomCS.s = skrollr.init({forceHeight: true}); 
     } 
    } 
}); 

건배,

J.

Answer 2

:

내 웹 페이지에 JQUERY와 모더 나이저를 가지고 있습니다 그래서 이것은 자바 스크립트 솔루션 일반 아니다 class는 breakpoints.js입니다.

$(window).setBreakpoints({ 
     // use only largest available vs use all available 
     distinct: true, 
     // array of widths in pixels where breakpoints 
     breakpoints: [ 
      320, 
      480, 
      768 
     ] 
    }); 

    $(window).bind('enterBreakpoint320',function() { 
     console.log("this is now 320"); 

     if(s != undefined) 
     { 
      console.log('destroy'); 
      s = skrollr.init().destroy(); 
     } 
     console.log(s); 
    }); 

    $(window).bind('enterBreakpoint480',function() { 
     console.log("this is now 480"); 

     if(s != undefined) 
     { 
      console.log('destroy'); 
      s = skrollr.init().destroy(); 
     } 
    }); 

    $(window).bind('enterBreakpoint768',function() { 
     console.log("this is now 768"); 
     s = skrollr.init({ 
       forceHeight: true 
      }); 
     console.log(s); 

    }); 

Answer 3

이것은 매우 간단하며이를 달성하는 여러 가지 방법이 있습니다. 여기에서 다운로드 할 수있는 inquire라는 플러그인을 사용합니다 http://wicky.nillia.ms/enquire.js/

플러그인을 다운로드하여 프로젝트에 추가 한 후 skrollr을 활성화하거나 비활성화하는 코드를 작성하십시오.

(function($) { 

    function enableSkrollr(){ 
     console.log('we are on desktop'); 

     // Enable Skroll only for non-touch devices 
     if(!Modernizr.touch){ 
      var s = skrollr.init({ 
       forceHeight: false 
      }); 
     } 

    } 

    function disableSkrollr(){ 
     console.log('we are on mobile'); 

     // Destroy Skrollr 
     var s = skrollr.init(); 
     s.destroy(); 
    } 

    enquire.register("screen and (min-width: 641px)", { 
     match : function() { 
      enableSkrollr(); 
     }, 
     unmatch : function() { 
      disableSkrollr(); 
     } 
    }); 

})(jQuery); 

위의 코드는 최소 641px 너비의 화면에서만 skrollr을 활성화합니다. 원하는대로이 값을 변경할 수 있습니다. 희망이 당신이 짝짓기하는 데 도움이됩니다.

Answer 4

이러한 솔루션은 이러한 작은 작업을 완료하는 데 모두 매우 복잡합니다. 나는 이것에 대한 연구를하고 위에서 언급 한 것처럼 다양한 플러그인을 구현하여 모바일 용 skrollr를 비활성화하려고 시도했지만 운이 없었다. 결국 나는 "여러 가지 긴 플러그인에 의존하는 대신 jQuery 두 줄을 사용하여이를 해결할 수없는 이유는 무엇입니까?"라고 생각했습니다. 그래서 간단한 if/then 스크립트를 작성했습니다. 일반적으로 브라우저 창 너비가 1000px 이상인 경우에만 skrollr을 시작할 수 있도록 skrollr을 호출해야합니다. 빠르고 더러운.

<script src="src/skrollr.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     if ($(window).width() > 1000) { 
      var s = skrollr.init() 
     } 
    }); 
    </script> 

그게 전부입니다. 일은 잘 됐어. 희망이 도움이!