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

Question

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

Answer 1

这些解决方案对于完成这样一个小任务来说都是非常复杂的。我对此进行了一些研究，并尝试实现各种插件（如上所述）来禁用移动版 skrollr，但没有任何运气。最后我想“为什么我不能只使用几行 jQuery 来解决这个问题，而不是依赖各种冗长的插件呢？” 因此，我编写了一个简单的 if/then 脚本，我通常只调用 skrollr 来启动它，它仅在浏览器窗口的宽度大小 > 1000px 时启用 skrollr。又快又脏。

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

而已。工作对我来说很好。希望这可以帮助！

Answer 2

这非常简单，并且有多种方法可以实现这一点。我使用了一个叫做查询的插件，你可以在这里下载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});
        }
    }
});

干杯，

J。

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

    });