为移动设备禁用Skrollr（<767px）

首先要感谢@prinzhorn这样一个惊人而强大的库。我的问题：我已经在我的网站的标题上实施了Skrollr视差背景，但是我希望在移动设备上查看时禁用此功能，特别是iPhone等。（最大宽度：767px）。我想知道什么是最好的方法来做到这一点？如果destroy（）函数能够做到这一点，或者我应该使用另一种技术？另外，如果destroy（）是答案，我怎么才能正确实现这个？非常感谢，非常感谢和示例或演示。为移动设备禁用Skrollr（<767px）

来源

2013-10-28 Petef1n

哇，那是一个很多问题。如果您缩小范围并提供链接或[自包含示例代码]（http://sscce.org）来说明您目前正在做的事情，那么运气会好得多。 –

嘿，不用担心我会缩小它的范围 - 我想知道如何在浏览器窗口点击移动大小（特别是<767px）时禁用skrollr的功能。 – Petef1n

destroy（）方法可以做到这一点。你也可以避免初始化小窗口上的skrollr，并且/或者如果窗口被调整为小，则销毁skrollr。

$(function() { 
    // initialize skrollr if the window width is large enough 
    if ($(window).width() > 767) { 
    skrollr.init(yourOptions); 
    } 

    // disable skrollr if the window is resized below 768px wide 
    $(window).on('resize', function() { 
    if ($(window).width() <= 767) { 
     skrollr.init().destroy(); // skrollr.init() returns the singleton created above 
    } 
    }); 
});

在此示例中，如果窗口被调整为较大，skrollr不会重新启用。

来源

2014-01-22 04:57:36 user2301179

对不起，这是迟到的回复，但这工作得很好。谢谢:) – Petef1n

现在我意识到使用[window.matchMedia]（https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries）而不是窗口大小调整器会更好更快。由于滚动条包含在窗口宽度中，所以会有细微的差别。 – user2301179

您还可以使用的userAgent检测 - 如此小的桌面分辨率仍然得到视差效果：

//function 
$(function skrollrInit() { 

    //initialize skrollr 
    skrollr.init({ 
     smoothScrolling: false 
    }); 

    // disable skrollr if using handheld device 
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
     skrollr.init().destroy(); 
    } 

}); 

//execute function 
skrollrInit();

来源

2014-09-11 12:57:58

Skrollr有它自己的移动检测功能

var s = skrollr.init(); 
if (s.isMobile()) { 
    s.destroy(); 
}

来源

2014-11-18 23:17:33 fatlinesofcode

在某些情况下，你只是禁用的转换：

@media only screen and (max-width: 480px){ 
    .divWithSkrollr{ 
     transform: none !important; 
    } 
}

来源

2015-04-09 01:56:16 chulian

如果您仍然需要对与Skrollr无关的元素进行一些CSS转换，那么这不是一个好的答案。 –

.destroy()方法是正确的满足使用;然而，我会以接受答案的方式处理这个问题。初始化skrollr实例第二次摧毁它是不必要的，性能可以提高使用.get()方法，像这样：如果当前存在，如果它存在只是破坏

$(function() { 
    // Init function 
    function skrollrInit() { 
    skrollr.init(yourOptions); 
    } 

    // If window width is large enough, initialize skrollr 
    if ($(window).width() > 767) { 
    skrollrInit(); 
    } 

    // On resize, check window width, if too small 
    // and skrollr instance exists, destroy; 
    // Otherwise, if window is large enough 
    // and skrollr instance does not exist, initialize skrollr. 
    $(window).on('resize', function() { 
    var _skrollr = skrollr.get(); // get() returns the skrollr instance or undefined 
    var windowWidth = $(window).width(); 

    if (windowWidth <= 767 && _skrollr !== undefined) { 
     _skrollr.destroy(); 
    } else if (windowWidth > 767 && _skrollr === undefined) { 
     skrollrInit(); 
    } 
    }); 
});

Skrollr永远不会被初始化的第二次。这样可以避免初始化和摧毁之间的短暂时间内可能发现的任何错误（我根据这方面的经验讲述）。

来源

2016-03-29 00:20:51

对我而言，我只想要在某些手机上禁用某些效果。我使用Bootstrap进行响应，因此当移动设备上的列崩溃时，桌面上的某些效果会受到干扰。

我的解决方案是对我不想在移动设备上工作的效果进行自定义类。 disable-mobile-skroll，然后删除我在skrollr被初始化之前使用的数据属性。

if ($(window).width() < 768) { 
    $('.disable-mobile-skroll').removeAttr('data-bottom-top').removeAttr('data-top'); 
}; 
// init Skrollr here

来源

2016-09-28 11:42:40 ThePagan

为移动设备禁用Skrollr（<767px）

回答

相关问题