Question

我正在开发一个ios网络应用程序，它有一个标题和标签栏，中间有一个可滚动的div。如果div溢出意味着有足够的内容使其滚动，感觉就像本机ios应用程序。但是当你尝试滚动div时没有足够的内容，整个页面都会被弹出。所以无论如何我想做的是如果div不能滚动则阻止在整个页面上滚动。

您可以使用它来阻止在页面上滚动。

document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });

我想知道是否有人可以帮助我并告诉我如何检测div是否溢出。

Answer 1

为了确保你正在使用的div，你设置了溢出的css代码：滚动; ？你可以解决这个问题，如果你把它改成overflow-y：auto;在那种情况下。

Answer 2

在touchstart期间检查内容的高度是否> =容器的高度。如果是，则禁用元素上的滚动。

$(".container").on("touchstart", function(e){
    var childHeight $(".child-element-container"). outerHeight();
    var containerHeight = $(".container"). outerHeight();
    if (childHeight <= containerHeight){
        $(".container").on("touchmove", false);
    } else {
        $(".container").off("touchmove");
    }
}

显然你需要改变一些东西，你可以修改它以禁止在整个页面上滚动。如果您在滚动时有滚动的自定义事件，则需要在转换事件.off后添加该事件。

另一个更复杂但不需要打开/关闭事件的解决方案是将一个虚拟div添加到占据content + unused space + 2px的容器中，然后运行计时器以查看它是否接近在容器底部的顶部，然后使用scrollTop(1)或scrollTop(childHeight - 1)，使其始终将1px内容置于限制之外，从而禁止整个页面拖动。

如果可滚动的div溢出，Javascript会阻止滚动

2 个答案: