Question

我想在宽度小于640px的屏幕上禁用skrollr。移动/平板电脑基本上没有动画。我试过这个https://github.com/Prinzhorn/skrollr/issues/350，但它不起作用。

Answer 1

这些解决方案对于完成这么小的任务来说都非常复杂。我对此做了一些研究并试图实现各种插件（如上所述）来禁用skrollr for mobile，但没有任何运气。最终我想＆＃34;为什么我不能使用几行jQuery来解决这个问题，而不是依赖于各种冗长的插件？＆＃34;所以，我写了一个简单的if / then脚本，我通常只调用skrollr来启动，只有当浏览器窗口的宽度大小为>时才启用skrollr。 1000像素。又快又脏。

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

那就是它。对我来说工作很好。希望这有帮助！

Answer 2

这非常简单，有多种方法可以实现这一目标。我使用了一个名为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 3

我是这样做的！

请注意我的网页上有JQUERY和Modernizr，所以这不是一个简单的JavaScript解决方案：

    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});
        }
    }
});

干杯，

学家

Answer 4

我使用了一个名为breakpoints.js的jQuery类。

$(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);

    });

如何在移动设备上禁用Skrollr？

4 个答案: