Development of a mobile terminal, H5 long page in iOS sliding, when sliding to the top or the bottom of the page, the page will also be able to slip or fall, finger leave the screen after springback, rubber band, when it’s simply the effect is no problem, but it of H5 page is not friendly, can lead to penetrate, leads to the illusion of H5 page appears truncated; After reviewing a number of articles, I came up with a solution that works well for testing: using the plugin Inobounce (but only for ios, not Android)

Development of a mobile terminal, H5 long page in iOS sliding, when sliding to the top or the bottom of the page, the page will also be able to slip or fall, finger leave the screen after springback, rubber band, when it’s simply the effect is no problem, but it of H5 page is not friendly, can lead to penetrate, leads to the illusion of H5 page appears truncated;

After referring to a lot of articles, I adopted the following method, pro test easy to use:

Use the plugin Inobounce (but only for ios, not Android)

npm install inobounce -s
Copy the code

Add the following code to the page that needs to be processed:

<script> 
import inobounce from 'inobounce' 
export default { 
data() { 
return { } 
}, 
mounted() { }, 
created() { 
let u = navigator.userAgent if (u.indexOf('iPhone') > -1) { inobounce.enable() }
}, 
beforeDestroy() { 
inobounce.disable() 
},
methods: { } 
} 
</script>
Copy the code

This is a perfect solution, which disables all rebound effects on the H5 page; All pages can’t scroll;

Solution:

Add the following code to a page or module that requires a scroll bar to achieve partial scrolling:

.body-scroll{ padding: 15px 15px 55px 15px; background: #f7f7f7; height: calc(100% - 70px); overflow-y: scroll; -webkit-overflow-scrolling: touch; }Copy the code