为移动设备禁用 Skrollr (<767px)答案

【问题标题】：Disable Skrollr for mobile device ( <767px )为移动设备禁用 Skrollr (<767px)
【发布时间】：2013-11-07 20:47:28
【问题描述】：

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

【问题讨论】：

哇哦，一下子问了很多问题。如果您缩小范围并提供链接或 self-contained example code 来说明您目前正在做的事情，您的运气会好得多。
嘿，别担心，我会缩小范围 - 我想知道当浏览器窗口达到移动尺寸（特别是

标签： jquery html parallax skrollr

【解决方案1】：

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。

【讨论】：

现在我意识到使用window.matchMedia 而不是窗口调整大小处理程序更好更快。由于滚动条包含在窗口宽度中，因此会有细微差别。
对我来说skrollr.init().destroy(); 导致了一个错误，即在移动设备上向上滚动时页面会跳到顶部。 skrollr.destroy(); 为我工作。

【解决方案2】：

您还可以使用 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();

【讨论】：

【解决方案3】：

Skrollr自带手机查功能

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

【讨论】：

【解决方案4】：

在某些情况下，您只需禁用过渡：

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

【讨论】：

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

【解决方案5】：

.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 当前存在，它永远不会被第二次初始化，只有在它存在时才会被销毁。这避免了您在初始化和销毁之间的短暂时刻可能发现的任何错误（我从经验中说）。

【讨论】：

【解决方案6】：

对我来说，我只想在某些手机上禁用某些效果。我使用 Bootstrap 进行响应，因此当列在移动设备上折叠时，桌面上的一些效果会受到干扰。

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

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

【讨论】：