suchen

Heim  >  Artikel  >  Web-Frontend  >  Eine in jquery geschriebene Methode, um festzustellen, ob die Bildlaufleiste eines Divs den unteren Rand erreicht hat [empfohlen]_jquery

Eine in jquery geschriebene Methode, um festzustellen, ob die Bildlaufleiste eines Divs den unteren Rand erreicht hat [empfohlen]_jquery

PHP中文网
PHP中文网Original
2016-05-16 15:03:041749Durchsuche

Es gibt viele Konzepte im Zusammenhang mit Bildlaufleisten in jQuery, aber es gibt drei Eigenschaften im Zusammenhang mit dem Ziehen von Bildlaufleisten, nämlich scrollTop, scrollLeft und scrollHeight. Darunter gibt es im Internet fast keine Anwendungstipps für die scrollHeight-Eigenschaft, ich muss sie einfach verwenden.

Wir besprechen jetzt nur die Eigenschaften scrollTop und scrollHeight im Zusammenhang mit vertikalem Scrollen.

1. Richtiges Verständnis der relevanten Eigenschaften der Bildlaufleiste:

Angenommen, es gibt den folgenden HTML-Code: 

<div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
  <div style="height:750px;">
  </div>
</div>

Da die Höhe des inneren p-Tags länger ist als die des äußeren und das äußere p das automatische Erscheinen der vertikalen Bildlaufleiste ermöglicht, können Sie die vertikale Bildlaufleiste sehen, nachdem Sie sie mit a geöffnet haben Browser. Ziehen Sie die Bildlaufleiste eine bestimmte Strecke nach unten, und der Seiteneffekt, den Sie sehen, ist wie folgt (a und b auf der rechten Seite sind mit PS markiert, nachdem ich das Bild aufgenommen habe):

Eine in jquery geschriebene Methode, um festzustellen, ob die Bildlaufleiste eines Divs den unteren Rand erreicht hat [empfohlen]_jquery


Was sind also die scrollTop- und scrollHeight-Eigenschaften des externen p hier?

Einige Leute sagen, dass scrollTop dem im Bild markierten a entspricht. scrollHeight entspricht der Höhe des äußeren p, 500px. Eigentlich ist keiner von ihnen richtig.

Tatsächlich haben die im Bild markierten Buchstaben a und b für uns keine spezifische Bedeutung zum Programmieren und Schreiben von JS-Code. Sie haben nur eine symbolische Bedeutung.

Tatsächlich wird die Bildlaufleiste im JS-Code als „Punkt“ abstrahiert. scrollHeight ist eigentlich nicht die „Höhe der Bildlaufleiste“ (b), sondern stellt die Höhe dar, die die Bildlaufleiste zum Scrollen benötigt, dh die Höhe des internen p beträgt 750 Pixel. Und scrollTop gibt an, wie viel die aktuelle Position der Bildlaufleiste (ein Punkt) in 750 Pixel einnimmt, nicht das im Bild markierte a.

Zu diesem Zeitpunkt waren wir von den Windows-Designern sehr beeindruckt. Das Design der Bildlaufleiste war so schön, dass es viele einfältige Mausbediener täuschte. Die Abstände zwischen a und b geben an, wie weit die Bildlaufleiste gescrollt wurde und wie weit sie gescrollt werden müssen. Es besteht eine entsprechende Beziehung zwischen ihnen, aber diese werden von Programmierern wie uns, die Anwendungen entwickeln, nicht berücksichtigt Entwerfen Sie die grafische Benutzeroberfläche des betreffenden Betriebssystems.

2 Stellen Sie fest, ob die vertikale Bildlaufleiste den unteren Rand erreicht hat

Nachdem die oben genannten Konzepte geklärt wurden, ist die Codierung tatsächlich relativ einfach ist ein Beispielcode: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8">
   <title>下拉滚动条滚到底部了吗？</title>
   <script language="JavaScript" src="jQuery-1.4.2.min.js" mce_src="jquery-1.4.2.min.js"></script>
   <script language="javascript">
   $(document).ready(function (){
    var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
    var nScrollTop = 0;  //滚动到的当前位置
    var nDivHight = $("#div1").height();
 
    $("#div1").scroll(function(){
     nScrollHight = $(this)[0].scrollHeight;
     nScrollTop = $(this)[0].scrollTop;
     if(nScrollTop + nDivHight >= nScrollHight)
      alert("滚动条到底部了");
     });
   });
   </script>
  <body>
  <div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
   <div style="background-color:#ccc; height:750px;">IE 和 FF 下测试通过</div>
  </div>
  </body>
  </html>


Codeerklärung:

Die Höhe des inneren Divs beträgt 750 und die Höhe des äußeren Divs beträgt 500, Die vertikale Bildlaufleiste muss also um 750-500 = 250 Distanz scrollen, um den unteren Rand zu erreichen, siehe die Anweisung nScrollTop + nDivHight >= nScrollHight.

Im Programm verbraucht das Erkennen und Ausführen von Urteilsanweisungen im Scroll-Ereignis des externen Div eine Menge CPU-Ressourcen. Ziehen Sie die Bildlaufleiste mit der Maus und dieses Ereignis wird ausgelöst, solange eine Änderung um ein Pixel erfolgt. Wenn Sie jedoch auf die Pfeile an beiden Enden der Bildlaufleiste klicken, wird das Ereignis viel seltener ausgelöst. Daher sollte das Scroll-Ereignis der Bildlaufleiste mit Vorsicht verwendet werden.

In diesem Beispiel wird die Situation beurteilt, in der keine horizontale Bildlaufleiste vorhanden ist. Wenn eine horizontale Bildlaufleiste vorhanden ist, ändert sich die Situation geringfügig. Daher müssen Sie in der Anweisung nScrollTop + nDivHight >= nScrollHight „ verwenden. >=" Vergleichsoperator, und wenn keine horizontale Bildlaufleiste vorhanden ist, reicht das Gleichheitszeichen „=" aus. Man kann es tatsächlich testen. Sie können auch feststellen, ob die horizontale Bildlaufleiste bis zum Ende gescrollt wurde.

Das Obige ist eine in jquery geschriebene Methode, um zu bestimmen, ob die div-Bildlaufleiste den unteren Rand erreicht. [Empfohlen]_jquery-Inhalt Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php .cn)!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung des JavaScript-Funktions-CurryingsNächster Artikel：Detaillierte Erläuterung des JavaScript-Funktions-Curryings

In Verbindung stehende Artikel

Mehr sehen