爲移動設備禁用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）

回答

相關問題