Отключить Skrollr для мобильного устройства (<767px)

Во-первых, хотелось бы поблагодарить @prinzhorn за такую потрясающую и мощную библиотеку. Мой вопрос: я внедрил фон parallax Skrollr в заголовок моего веб-сайта, но я хотел бы отключить эту функцию при просмотре на мобильном устройстве, особенно iphones и т.д., Например. (max-width: 767px). Мне было интересно, что было бы лучшим способом сделать это? И если функция destroy() могла это сделать или я должен использовать другую технику? Кроме того, если destroy() является ответом, как я могу реализовать это правильно? Большое спасибо и примеры или демонстрацию очень оценили.

Ответ 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 не получает повторного включения, если размер окна становится большим.

Ответ 2

Skrollr имеет собственную функцию проверки мобильного телефона

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

Ответ 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();

Ответ 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 никогда не будет инициализироваться во второй раз, если он существует и уничтожается только в том случае, если он существует. Это позволяет избежать ошибок, которые могут возникнуть в короткий промежуток времени между инициализацией и уничтожением (я говорю из опыта по этому вопросу).

Ответ 5

В некоторых случаях вы просто отключите переходы:

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

Ответ 6

Для меня я хотел, чтобы на некоторых мобильных устройствах были отключены некоторые эффекты. Я использовал Bootstrap для реагирования, поэтому некоторые эффекты на рабочем столе мешали, когда столбцы рушались на мобильных устройствах.

Мое решение состояло в том, чтобы создать собственный класс для эффектов, которые я не хотел работать на мобильных устройствах. disable-mobile-skroll, а затем удалите атрибуты данных, которые я использовал, прежде чем инициализировать skrollr.

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