Question

这是我在移动设备上发现的一个常见问题。我还没有找到一个可靠的答案。

我不接受以下内容，因为他们完全没有工作（测试）：

将以下内容添加到正文和html标记

这确实有效，但会导致页面跳转到顶部。如果你转动横向并让浏览器工具栏显示在滚动

，你可以在Safari中破解它

.noScroll { 
    height: 100%;
    overflow-y: hidden;
}

将以下内容添加到正文标记

这确实有效，但会导致页面跳转到顶部。

.noScroll { 
    height: 100%;
    overflow-y: hidden;
    position: fixed;
}

JS和CSS的组合

如果你转动横向并让浏览器工具栏显示在滚动上，你可以在Safari中破解它。此方法解决了跳转问题

.noScroll { 
    height: 100%;
    overflow-y: hidden;
    position: fixed;
}

var body = document.body,
    lastTop = 0,
    startScroll,
    stopScroll;

startScroll = function () {
    body.style.top = '';
    body.scrollTop = lastTop; 
};

stopScroll = function () {
    lastTop = document.body.scrollTop;
    body.className = 'noScroll';
    body.style.top = '-' + lastTop.toString() + 'px';
}

我尝试了其他方法，但他们也没有工作。您可以在body标签上禁用touchmove，但它不允许您滚动任何地方，例如。

document.body.addEventListener('touchmove', function () { return false; });

我能做些什么吗？

JS滚动条是目前唯一正确的解决方案。

干杯

移动 - 溢出-y：隐藏不会阻止正文元素滚动

0 个答案: