убрав скроллер на экранах мобильных телефонов

Question

убрав скроллер на экранах мобильных телефонов

Я пытаюсь удалить функции скролла на экране мобильного телефона (максимальная ширина 767 пикселей).

У меня есть следующий код, который (предполагается), чтобы остановить skrollr на мобильном телефоне, но он не работает (я попытался поместить его в отдельный, связанный файл и поместить его в сам код skrollr, без изменений)

Код JAVA

$(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
}
});
});

код внизу footer.php (чтобы заставить работать скроллр)

<script type="text/javascript">
skrollr.init({
forceHeight: false
});
</script>

<script type="text/javascript">
//http://detectmobilebrowsers.com/ + tablets
(function(a) {
if(/android|avantgo|bada\ ... )
{
//Add skrollr mobile on mobile devices.
document.write('<script type="text/javascript" src="js/skrollr.mobile.min.js"><\/script>');
}
})(navigator.userAgent||navigator.vendor||window.opera);
</script>

0

css jquery-mobile php skrollr

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вы инициализируете skrollr в footer.php независимо от текущей ширины окна. Условие в строке 3 вашего файла JAVASCRIPT — if ($(window).width() > 767) { — работает, но на этом этапе skrollr уже инициализирован JavaScript в вашем footer.php

Я бы порекомендовал вам удалить инициализацию skrollr в файле footer.php и изменить ваш код javascript примерно так:

(function($) {
$(function () {
var skrollrInstance;
var onResize = function () {
var isMobile = $(window).width() <= 767;
if (!skrollrInstance && !isMobile) {
skrollrInstance = skrollr.init({
forceHeight: false
});
} else if(skrollrInstance && isMobile) {
skrollrInstance.destroy();
skrollrInstance = null;
}
};
$(window).on('resize', onResize);
onResize();
});
})(jQuery);

Скрипки: http://jsfiddle.net/erfvgx85/2/ (измените размер кадра «Result», чтобы проверить его)

Я сохранил текущий skrollrInstance в отдельной переменной. Как вы прокомментировали, «// skrollr.init () возвращает созданный выше синглтон (экземпляр)», но это может быть проблемой производительности, если skrollr не инициализирован или уже уничтожен в данный момент.

Я также думаю, что лучше иметь одно место для вызова skrollr.init — иначе мы могли бы забыть передать те же параметры (forceHeight: false) в другом вызове. (как в вашем примере)

0