在移动设备上,当html页面的高度变化较小时,可以通过以下方法使页面不滚动:
body {
overflow: hidden;
}
window.addEventListener('resize', function() {
var windowHeight = window.innerHeight;
var pageHeight = document.documentElement.scrollHeight;
if (pageHeight <= windowHeight) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'auto';
}
});
这段代码会在窗口大小变化时,比较页面的高度和窗口的高度,如果页面的高度小于等于窗口的高度,则将body元素的overflow属性设置为hidden,否则设置为auto,从而控制页面的滚动行为。
这种方法适用于需要固定页面内容不滚动的场景,例如弹窗、固定导航栏等。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云