Under normal circumstances, after the wechat browser page is pulled down, you can see a “” this page is provided by XXXX”, QQ browser X5 kernel provides technical support “, some projects need to prohibit the wechat browser to pull down to view THE URL policy

Treatment scheme

1. Prohibit the slide of the entire page of the browser (when the content can be displayed on one screen)

This method is used when all content can be displayed on one screen and the page does not need scrolling

/ / prohibited page scrolling document. Body. AddEventListener (' touchmove ', function (e) {e.p reventDefault ()}, {passive: false})Copy the code

Ii. Avoid beyond scrolling in page layout, and combine Better Scroll to achieve scrolling function (when content needs scrolling area)

BetterScroll handles scrolling of the first child element of the Wrapper by default and all other elements are ignored. Content cannot be scrolled when it is no higher than the height of the parent container, and once it is higher than the height of the parent container, we can scroll the content area

  • NPM install better-scroll –save
  • The DOM structure is initialized when it is loaded, either in mounted() or $nextTick
  • When a data render container element needs to be retrieved asynchronously, the refresh method is called after the DOM is re-rendered (using this.$nextTick) to recalculate to ensure proper scrolling
<style lang='less' scoped> .chart-container { width: 100%; height: 100%; overflow-y: auto; margin-bottom: 24px; } </style> <template> <div class="chart-container" ref="wrapper"> <div class="content"> <p v-for="item in num" {{item}}</p> </div> </div> </template> <script> export default {name: key="item" @click="toAdd"> 'Demo', data() { return { num: 50, contentScroll: // Init () {this.initscroll ()} // init () {this.initscroll () {if (! ContentScroll = new BScroll(this.$refs.wrapper, {tap: True, click: true, // Allow y direction scrolling scrollY: true, // excessive bounce effect when scrolling to both ends of the page, default is true bounce: false, // use javascript to implement scrolling useTransition: False})} else {this. ContentScroll. Refresh () / / initialized call the enclosing scroll. The refresh method to calculate}}, toAdd() { this.num = this.num + 10 this.$nextTick(() => { this.contentScroll.refresh() this.contentScroll.scrollTo(0, This. ContentScroll. MaxScrollY) / / scroll to the bottom}}}} < / script >Copy the code