How to solve the problem of pulling down to refresh at the top of mobile browsers

The editor below will share with you an article that perfectly solves the problem of web page source or refresh when scrolling down at the top of mobile browsers. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor and take a look.

The problem is as shown below:

Generally deal with this Class problems will all have an attribute: "event.preventDefault()", but if used directly, the internal scrolling of the page will also be invalid and cannot be scrolled. The way I handle it is similar to it.

Because the sliding area moves forward, the maximum distance from the top of the sliding block to the top of the browser is 0 (the rest are negative values ​​[$('#bodycthead').offset().top]), When it is 0, it means that you have returned to the top. When you continue to pull down, there should be no reaction. You can disable the default sliding. When you pull up, you should cancel the default sliding, so you should encapsulate "event.preventDefault()" into a function.

What needs to be done is to determine whether to slide up or down. When touching the screen, record a Y value (scroll_start = e.changedTouches[0].clientY;), and a Y value will be generated when moving. (e.changedTouches[0].clientY), the difference between the two values ​​(e.changedTouches[0].clientY-scroll_start). If it is a positive value, it means sliding down, and if it is a negative value, it means sliding up.

Add event monitoring:

var scroll_start=0;//定义滑动时的起点
function handler(){//禁止默认滑动函数
 event.preventDefault();
}
document.addEventListener("touchstart",function(e){
 scroll_start = e.changedTouches[0].clientY;//设置起点为触摸时的点
 if($('#bodycthead').offset().top==0){//如果触摸时是滑动块在顶部则禁用默认滑动
  document.addEventListener('touchmove', handler, false);
 }
});
document.addEventListener("touchmove",function(e){
 $("title").html(e.changedTouches[0].clientY-scroll_start);
 if($('#bodycthead').offset().top==0){//想做的是中断滑动并禁用默认滑动，暂时没找到中断的方法
  document.addEventListener('touchmove', handler, false);
 }
 if((e.changedTouches[0].clientY-scroll_start)<0){//如果是向上滑动则恢复默认滑动
  document.removeEventListener(&#39;touchmove&#39;, handler, false);
 }
});

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement component and parent-child component communication in Vue2.0

How to connect vue2.0 with animate. css are combined and used together (detailed tutorial)

How to convert a character into an integer in C

#In vue2.0 there is What are the commonly used UI libraries?

How to use the swiper component to achieve image switching display in WeChat Mini Program

How to implement circular advertising banners in javascript

The above is the detailed content of How to solve the problem of pulling down to refresh at the top of mobile browsers. For more information, please follow other related articles on the PHP Chinese website!