溢出滚动div下面

Question

我正在与另一个div上方的div工作。当我滚动位于另一个上方且到达底部的div时，它会滚动整个身体。这很难解释，所以我做了一个小提示来证明效果：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;
}

我的问题是：当浮动div滚动到底部或顶部时，如何防止正文滚动？我确信这是我很遗憾的事情。谢谢！

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

Answer 1

<强>桌面

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

例如，当用户使用...

悬停在浮动div上时，您可以禁用正文的滚动

body{overflow:hidden}

然后通过使用..

将鼠标悬停在浮动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()});
}