На iPhone макет с внешним / внутренним DIV: при прокрутке попадать в внешний DIV

Question

У меня следующая проблема с макетом.У меня мобильное приложение с 3-х колоночным макетом.При выборе определенного раздела соответствующие подпанели отображаются / скрываются.

Внешний DIV является прокручиваемым DIV.Раздел 1 также имеет прокручиваемый внутренний DIV.

Проблема в том, что когда я активирую раздел 1, iPhone задерживает мою прокрутку во внешнем DIV, даже если я нажимаю большим пальцем внутри внутреннего DIV , и я не могу прокрутить свой внутренний DIV, что я действительно хочу сделать.Таким образом, пользователь пытается прокрутить фактический внутренний DIV, и вместо этого он прокручивает внешний DIV, который содержит верхний колонтитул, площадь раздела и нижний колонтитул (там есть немного диапазона прокрутки, просто немного).

Цель состоит в том, чтобы по возвращении в Раздел 1, если пользователь «показывает пальцем» Внутренний DIV, то Внутренний DIV должен прокручиваться.Но Outer DIV прокручивается «по умолчанию».

Я пробовал разные вещи: делать focus() в JS всякий раз, когда я активирую Раздел 1;Поместив tabindex=0 во Внутренний DIV, чтобы сделать его фокусируемым.Ничего из этого не сработало.

Я также пытался сделать Высота Внутреннего DIV в% или Пикселях.Если я изменю его на Пиксели (например, 900 пикселей), я получу некоторые начальные ловушки, но другие все же будут представлены.

В основном мне нужно это:

document.addEventListener('touchmove', function(e) {            
    if ($($(e.target)[0].closest('div')).attr('id') == 'innerDIV') {
        // We are inside the Inner DIV. 
        // Force scrolling inside this DIV; Disable any outer body scrolling
        $('body').css('overflow-y', 'hidden');
        // Or maybe $('#innerDIV').focus() ?
    } else {
        // Outside
        $('body').css('overflow-y', 'auto');                
    }

}, false);