禁用移动设备的Skrollr（< 767px） [英] Disable Skrollr for mobile device ( <767px )

问题描述

首先要感谢@prinzhorn这样一个令人惊叹且功能强大的图书馆。我的问题：我已经在我的网站标题中实现了Skrollr视差背景，但我想在移动设备上观看时禁用此功能，尤其是iphone等。 （最大宽度：767px）。我想知道最好的方法是什么？如果destroy（）函数能够做到这一点，或者我应该使用另一种技术？另外，如果destroy（）是答案，我怎么能正确实现呢？非常感谢和示例或演示非常感谢。

解决方案

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

  $（function（）{
 //如果窗口宽度足够大则初始化skrollr 
 if（$（window）.width（）> 767）{
 skrollr.init（yourOptions ）; 
} 
 
 //如果窗口大小调整到768px以下，则禁用skrollr 
 $（窗口）.on（'resize'，function（）{
 if（$（window）。width（）< = 767）{
 skrollr.init（）。destroy（）; // skrollr.init（）返回在
上面创建的单例} 
}）; 
}）; 
  

在此示例中，如果窗口调整为大，则不会重新启用skrollr。 / p>

Firstly would like to thanks @prinzhorn for such an amazing and powerful library. My question: I have implemented a Skrollr parallax background to the header of my website but I would like to disable this feature when viewed on a mobile device, particularly iphones, etc. eg. (max-width: 767px).I was wondering what would be the best way to do this? And if the destroy() function was able to do this or I should be using another technique? Also, if destroy() is the answer, how could I implement this correctly? Many thanks and examples or demo's greatly appreciated.

解决方案

The destroy() method does do that. You can also avoid initializing skrollr on small windows to begin with, and/or destroy skrollr if the window gets resized to be small.

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

In this example, skrollr does not get re-enabled if the window gets resized to be large.

这篇关于禁用移动设备的Skrollr（< 767px）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！