Question

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

Answer 1

Skrollr有自己的移动检查功能

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

Answer 2

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。

Answer 3

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

Answer 4

.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如果当前存在则永远不会第二次初始化，只有在存在时才会被销毁。这可以避免在初始化和销毁之间的短暂时刻发现的任何错误（我从这方面的经验谈起）。

Answer 5

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

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

Answer 6

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

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

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

禁用移动设备的Skrollr（＆lt; 767px）

6 个答案: