jQuery mobile - разрешить прокрутку только при закрытой боковой панели?

Я не хочу, чтобы пользователь прокручивал, когда открыта какая-либо боковая панель. Они должны прокрутить, как только он закроется.

Я использую приведенный ниже код, но он не работает на мобильном устройстве Android

$(document).bind('panelopen', function (e, data) {     
        $('body').css("overflow", "hidden");
    });

    $(document).bind('panelclose', function (e, data) {         
        $('body').css("overflow", "auto");
    });
Источник

4 ответа

Решение

overflow вариант никогда не работал для меня. Я должен был положиться на touchmove событие body, Я изменил твой pageinit событие к этому:

$(document).on("pageinit", "#page1", function (event) {   

    $("#defaultpanel").on("panelopen", function (event, ui) { 
        //setting overflow : hidden and binding "touchmove" with event which returns false
        $('body').css("overflow", "hidden").on("touchmove", stopScroll);
    });

    $("#defaultpanel").on("panelclose", function (event, ui) {
        //remove the overflow: hidden property. Also, remove the "touchmove" event. 
        $('body').css("overflow", "auto").off("touchmove");
    });

    function stopScroll() {
        return false;
    }    
});

Поэтому, когда панель открывается, overflow свойство изменяется, после чего touchmove событие связано с body, stopScroll функция, которая предотвращает действие по умолчанию нашего сенсорного экрана, связана с touchmove событие тела.

Когда панель закроется, вам придется unbind тот touchmove событие от body восстановить свой свиток.

Работает на телефонах Galaxy S3, Xperia S, Nexus 4 и планшете Nexus 7.

Вот код на JSBin

Источник

Последние документы JQuery Mobile API говорят, чтобы использовать

$( ".selector" ).on( "panelopen", function( event, ui ) {} );

Не могли бы вы попробовать это? Это может работать с использованием on() метод вместо старшего bind() подход. Кроме того, возможно, вы могли бы связать изменение переполнения с потомком тела вместо элемента тела. Трудно дать более конкретное решение, не видя больше вашего кода.

http://api.jquerymobile.com/panel/

ОБНОВИТЬ

Вот ссылка на jsbin с рабочим решением: http://jsbin.com/azavup/2/

Точный JS используется ниже:

$( document ).on( "pageinit", "#page1", function( event ) {

  $( "#defaultpanel" ).on( "panelopen", function( event, ui ) {
    //console.log("i am open");
    $('body').css("overflow", "hidden");
  } );

  $( "#defaultpanel" ).on( "panelclose", function( event, ui ) {
    //console.log("i am close");
    $('body').css("overflow", "auto");
  } );

});

Так что, возможно, вам просто нужно изменить свой panelopen/panelclose привязка к фактическому селектору панели, а не к document, Это работает.

Источник

Просто используйте:

$('#nav-panel').panel({
    open: function(event, ui) {
        //check the event alert('kpl');
        $('body').bind('touchmove', function(e){e.preventDefault()});
    },
    close: function(event, ui) {
        //check the event alert('kpl1');
        $('body').unbind('touchmove');
    }
});
Источник

Добавление этого CSS:

.ui-panel.ui-panel-open {
   position:fixed;
}

.ui-panel-inner {
    position: absolute;
    top: 1px;
    left: 0;
    right: 0;
    bottom: 0px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

и добавив этот атрибут к вашему элементу:

data-position-fixed="true"

исправит проблему. (Это для меня)

Источник
Другие вопросы по тегам