禁用移动设备的Skrollr（<767px）
首先要感谢@prinzhorn这样一个令人惊叹且function强大的图书馆。 我的问题：我已经在我的网站标题中实现了Skrollr视差背景，但我想在移动设备上观看时禁用此function，尤其是iphone等。 （最大宽度：767px）。我想知道最好的方法是什么？ 如果destroy（）函数能够做到这一点，或者我应该使用另一种技术？ 另外，如果destroy（）是答案，我怎么能正确实现呢？ 非常感谢和示例或演示非常感谢。
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。
Skrollr有自己的移动检查function
var s = skrollr.init(); if (s.isMobile()) { s.destroy(); }
您还可以使用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();
.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当前存在，则永远不会第二次初始化，只有在存在时才会被销毁。 这可以避免在初始化和销毁之间的短暂时刻发现的任何错误（我从这方面的经验谈起）。
在某些情况下，您只需禁用转换：
@media only screen and (max-width: 480px){ .divWithSkrollr{ transform: none !important; } }
对我来说，我只想在某些手机上禁用一些效果。 我使用Bootstrap进行响应，因此当列在移动设备上折叠时，桌面上的某些效果会受到干扰。
我的解决方案是针对我不想在移动设备上工作的效果制作自定义课程。 disable-mobile-skroll然后在初始化skrollr之前删除我正在使用的数据属性。
if ($(window).width() < 768) { $('.disable-mobile-skroll').removeAttr('data-bottom-top').removeAttr('data-top'); }; // init Skrollr here