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