So lösen Sie das Problem des Herunterziehens zum Aktualisieren oben in mobilen Browsern

Der unten stehende Herausgeber wird einen Artikel mit Ihnen teilen, der das Problem der Webseitenquelle oder -aktualisierung beim Scrollen oben in mobilen Browsern perfekt löst. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist. Folgen wir dem Herausgeber und werfen wir einen Blick darauf.

Das Problem ist wie folgt:

Im Allgemeinen Behandeln Sie diese Klasse Probleme haben alle ein Attribut: „event.preventDefault()“, aber bei direkter Verwendung ist das interne Scrollen der Seite ebenfalls ungültig und kann nicht gescrollt werden. Die Art und Weise, wie ich damit umgehe, ist ähnlich.

Da sich der Schiebebereich nach vorne bewegt, beträgt der Abstand von der Oberseite des Schiebeblocks bis zur Oberseite des Browsers höchstens 0 (der Rest sind negative Werte [$('#bodycthead').offset ().top]), wenn es 0 ist, bedeutet dies, dass Sie nach oben zurückgekehrt sind. Wenn Sie weiter nach unten ziehen, sollte es keine Reaktion geben das Standardgleiten, daher sollten Sie „event.preventDefault()“ in eine Funktion kapseln.

Alles, was Sie tun müssen, ist zu bestimmen, ob Sie nach oben oder unten gleiten möchten. Zeichnen Sie beim Berühren des Bildschirms einen Y-Wert auf (scroll_start = e.changedTouches[0].clientY;), und es wird ein Y-Wert angezeigt Wird beim Verschieben generiert (e.changedTouches[0].clientY), der Unterschied zwischen den beiden Werten (e.changedTouches[0].clientY-scroll_start) bedeutet, dass er nach unten rutscht es ist ein negativer Wert, es bedeutet, dass es nach oben gleitet.

Ereignisüberwachung hinzufügen:

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie Komponenten- und Eltern-Kind-Komponentenkommunikation in Vue2.0

So integrieren Sie vue2.0 mit animate. CSS kombinieren und zusammen verwenden (ausführliches Tutorial)

So konvertieren Sie ein Zeichen in eine Ganzzahl in C#

In vue2. 0 gibt es Was sind die am häufigsten verwendeten UI-Bibliotheken?

So verwenden Sie die Swiper-Komponente, um die Anzeige von Bildern im WeChat-Miniprogramm umzuschalten

So implementieren Sie einen kreisförmigen Werbestreifen in Javascript

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem des Herunterziehens zum Aktualisieren oben in mobilen Browsern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!