记录实用有价值的内容

H5 禁止弹性下拉

禁止弹性下拉有两个思路


最上层页面用 position:fixed 固定住,这样页面下拉的时候这个上层 div 就固定在屏幕上了。

还是能够看出页面上下拖动的,只不过被拖动的 html 在固定 div 的底部,看不出

将 html 设置 overflow: hidden; 将 body 设置 overflow: scroll;

固定住了最顶层的 html,但是页面内容如果超过1屏的话,可以将 body 设置成 scroll。


如果只需要一屏显示的可以直接用样式

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

JS 禁止滑动

document.body.addEventListener('touchmove', function (e) {
  e.preventDefault(); // 阻止默认的处理方式(阻止下拉滑动的效果)
}, { passive: false }); // passive 参数不能省略,用来兼容 iOS 和 Android


上一篇:<input>type='file' 标签选取文件/文件夹