在iphone上,外部/内部div布局:滚动时被困在外部div中

我有以下布局问题。我有一个三列布局的移动应用程序。在选择某个部分时,会显示/隐藏相应的子面板。

外部div是一个可滚动div.section 1也有一个可滚动的内部div.

问题是当我启动第一部分时, iphone将我的滚动功能捕捉到外部div中,即使我将拇指按在内部div中 ,我不能滚动我的内部div,这是我真正想做的。因此,用户尝试滚动实际的内部div,而不是滚动外部div,其中包含页眉、节区域和页脚(有一点滚动范围,只是一点点)。

目标是,当返回到第1节时,如果用户“拇指”指向内部div,那么应该滚动内部div。但是外部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);