先上实际实现h5页面效果图。
如图实现的需求为:固定header + 固定footer + 可滚动content
如众多网友说的直接给body阻止默认事件,实际上是不行的(代码一)
document.body.addEventListener('touchmove',function(e){
e.preventDefault()
},false)
若想实现页面完全不可滚动的需求,需加一参数才可实现,具体不展开说明,可自行google(代码二)
document.body.addEventListener('touchmove',function(e){
e.preventDefault()
},{ passive:false })
接下来介绍本文的具体解决方案:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-