Comment résoudre le problème de l'actualisation pour actualiser en haut des navigateurs mobiles

L'éditeur ci-dessous partagera avec vous un article qui résout parfaitement le problème de la source ou de l'actualisation des pages Web lors du défilement vers le haut des navigateurs mobiles. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l'éditeur et jetons un coup d'œil

Le problème est le suivant :

Généralement. gérer cela Tous les problèmes de classe auront un attribut : "event.preventDefault()", mais s'il est utilisé directement, le défilement interne de la page sera également invalide et ne pourra pas défiler. La façon dont je le gère est similaire.

Étant donné que la zone de glissement avance, la distance entre le haut du bloc coulissant et le haut du navigateur est d'au plus 0 (le reste sont des valeurs négatives [$('#bodycthead').offset (.top]), Lorsqu'il est à 0, cela signifie que vous êtes revenu en haut. Lorsque vous continuez à tirer vers le bas, il ne devrait y avoir aucune réaction. Vous pouvez désactiver le glissement par défaut. Lorsque vous tirez vers le haut, vous devez annuler. le glissement par défaut, vous devez donc encapsuler "event.preventDefault()" dans une fonction.

Tout ce que vous avez à faire est de déterminer si vous souhaitez glisser vers le haut ou vers le bas. Lorsque vous touchez l'écran, enregistrez une valeur Y (scroll_start = e.changedTouches[0].clientY;), et une valeur Y sera. généré lors du déplacement. (e.changedTouches[0].clientY), la différence entre les deux valeurs (e.changedTouches[0].clientY-scroll_start) Si c'est une valeur positive, cela signifie glisser vers le bas, et si). c'est une valeur négative, cela signifie glisser vers le haut.

Ajouter une surveillance des événements :

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);
 }
});

Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile dans le cadre du processus. avenir.

Articles connexes :

Comment implémenter la communication entre composants et composants parent-enfant dans Vue2.0

Comment intégrer vue2.0 avec animate. Combinez les css et utilisez-les ensemble (tutoriel détaillé)

Comment convertir un caractère en entier en C#

Dans vue2. 0 il y a Quelles sont les bibliothèques d’interface utilisateur couramment utilisées ?

Comment utiliser le composant swiper pour changer l'affichage des images dans le mini-programme WeChat

Comment implémenter la bande publicitaire circulaire dans javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!