10

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

4

6 回答 6

26

Skrollr自带手机查账功能

var s = skrollr.init();
if (s.isMobile()) {
    s.destroy();
}
于 2014-11-18T23:17:33.147 回答
22

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-22T04:57:36.797 回答
5

您还可以使用 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-11T12:57:58.313 回答
3

该.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-29T00:20:51.333 回答
2

在某些情况下，您只需禁用转换：

@media only screen and (max-width: 480px){
    .divWithSkrollr{
        transform: none !important;
    }
}
于 2015-04-09T01:56:16.120 回答
1

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

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

if ($(window).width() < 768) {
    $('.disable-mobile-skroll').removeAttr('data-bottom-top').removeAttr('data-top');
};
// init Skrollr here
于 2016-09-28T11:42:40.723 回答