是否可以防止iOS Safari中的过度滚动/反弹滚动?

时间:2017-02-01 23:21:20

标签: javascript ios css mobile-safari

我已经尝试了我在网上找到的所有内容,包括iNoBounce和stackoverflow上的所有建议,但没有一个能够正常工作。有解决方案吗?

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
</head>
<body style="overflow:hidden">
    <div id="test">
TOP:<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a
    <br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a
    <br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a
    <br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a
    </div>
</body>
</html>

CSS:

html,body
{
  width: 100%;
  height: 100%;
  overflow: hidden;
}

div
{
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

JavaScript的:

var lastY = -1;

document.addEventListener( "touchmove",
function(event)
{
var test = document.getElementById( "test" );//.innerHTML = document.body.scrollTop + " = " + lastY + " <= " + event.touches[0].screenY;

if ( test.scrollTop <= 0 && lastY < event.touches[0].screenY && lastY !== -1)
    {
    event.preventDefault();
    event.stopPropagation();

    lastY = event.touches[0].screenY;
    return false;
    }

lastY = event.touches[0].screenY;
});

0 个答案:

没有答案