Comment résoudre le problème de l'actualisation pour actualiser en haut des navigateurs mobiles-js tutoriel-php.cn

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

亚连

Libérer： 2018-06-23 15:30:26

original

7514 Les gens l'ont consulté

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($(&#39;#bodycthead&#39;).offset().top==0){//如果触摸时是滑动块在顶部则禁用默认滑动
  document.addEventListener(&#39;touchmove&#39;, handler, false);
 }
});
document.addEventListener("touchmove",function(e){
 $("title").html(e.changedTouches[0].clientY-scroll_start);
 if($(&#39;#bodycthead&#39;).offset().top==0){//想做的是中断滑动并禁用默认滑动，暂时没找到中断的方法
  document.addEventListener(&#39;touchmove&#39;, handler, false);
 }
 if((e.changedTouches[0].clientY-scroll_start)<0){//如果是向上滑动则恢复默认滑动
  document.removeEventListener(&#39;touchmove&#39;, handler, false);
 }
});

Copier après la connexion

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.