1.根目录页面 index.html
<script>
let overscroll = function(el) {
el.addEventListener('touchstart', function() {
let top = el.scrollTop
let totalScroll = el.scrollHeight
let currentScroll = top + el.offsetHeight
if (top === 0) {
el.scrollTop = 1
} else if (currentScroll === totalScroll) {
el.scrollTop = top - 1
}
})
el.addEventListener('touchmove', function(evt) {
if (el.offsetHeight < el.scrollHeight) evt._isScroller = true
})
}
overscroll(document.querySelector('#app'))
document.body.addEventListener(
'touchmove',
function(evt) {
console.log(evt._isScroller,111)
if (!evt._isScroller) {
evt.preventDefault()
}
},
{ passive: false }
)
</script>
<style>
html,body{
padding: 0;
margin: 0;
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
position:absolute;
width:100%;
top:0;
}
</style>
2.app.vue页面
<template>
<div id="app">
<div class="wx-pages">
<router-view/>
</div>
</div>
</template>
<style>
body{
margin:0;
padding:0
}
#app {
height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
padding:0;
margin:0
}
.wx-pages:after{
min-height: calc(100% + 1px)
}
</style>
兼容ios和安卓,亲测有效