css - 下面溢出滚动div

Question

我正在使用位于另一个 div 之上的 div。当我滚动位于另一个上方的 div 并到达底部时，它会滚动整个主体。这很难解释，所以我做了一个 fiddle 来演示效果:http://jsfiddle.net/2Ydr4/

HTML:

<div class="body">
    <div class="above">
       <!-- Content in here that is longer than the height -->
    </div>
</div>

CSS:

.above {
    width: 300px;
    height: 200px;
    overflow-y: scroll;
    background: red;
    z-index: 10;
    position: fixed;
}

我的问题是:当 float 的 div 滚动到底部或顶部时，如何防止主体滚动？我敢肯定这是很明显的，我错过了。谢谢!

编辑:我可能应该提到它的目标设备是 iPad。我尝试按照下面的建议有条件地添加 body {overflow: hidden}，虽然这解决了桌面浏览器上的问题，但它似乎仍然存在于基于触摸的浏览器上。

Answer 1

桌面

这就是滚动的工作原理。您需要做的是暂时或通过用户操作删除正文的滚动属性。

例如，当用户将鼠标悬停在 float 的 div 上时，您可以使用...禁用主体的滚动

body{overflow:hidden}

然后当您将鼠标悬停在 float div 上时使用.. 重新启用它

body{overflow:auto}

移动

在移动设备上，您需要使用触摸事件。我没有尝试过，但理论上这应该可行。

var $body = document.querySelector('.body'),
    $above = document.querySelector('.above');

$above.addEventListener('ontouchstart', onAboveStart, false);
$body.addEventListener('ontouchstart', onBodyStart, false);


function onAboveStart()
{
        $body.addEventListener('ontouchmove', function(e) {e.preventDefault()}, false);
}

function onBodyStart()
{
        $body.removeEventListener('ontouchmove', function(e) {e.preventDefault()});
}