Scroll ist auch ein sehr nützliches Tag. In diesem Artikel wird ein Scroll-Beispielcode für die Beurteilung von p nach unten angezeigt. Er hat einen guten Referenzwert und ich hoffe, dass er allen helfen kann.
Das Beispiel sieht wie folgt aus:
<!DOCTYPE html> <html> <head> <title>判断p滑到底部的代码</title> <script type="text/javascript" src="jquery-3.1.0.min.js"></script> <style type="text/css"> #scrollTest{ width:100px; height:100px; overflow-y: auto;//当p中y方向的内容溢出时,y轴分别显示滚动条 border:1px solid red; } </style> </head> <body> <p id="scrollTest"> <table> <tr> <td>111</td> <td>222</td> </tr> <tr> <td>111</td> <td>222</td> </tr> <tr> <td>111</td> <td>222</td> </tr> <tr> <td>111</td> <td>222</td> </tr> <tr> <td>111</td> <td>222</td> </tr> <tr> <td>111</td> <td>222</td> </tr> <tr> <td>111</td> <td>222</td> </tr> </table> </p> </body> </html> <!--//事先得引入jQuery文件--> <script type="text/javascript"> $("#scrollTest").scroll(function(){ var h = $(this).height();//p可视区域的高度 var sh = $(this)[0].scrollHeight;//滚动的高度,$(this)指代jQuery对象,而$(this)[0]指代的是dom节点 var st =$(this)[0].scrollTop;//滚动条的高度,即滚动条的当前位置到p顶部的距离 if(h+st>=sh){ //上面的代码是判断滚动条滑到底部的代码 //alert("滑到底部了"); $("#scrollTest").append(111+"<br>");//滚动条滑到底部时,只要继续滚动滚动条,就会触发这条代码.一直滑动滚动条,就一直执行这条代码。 } }) </script>
Jeder sollte etwas über das Scrollen danach wissen Beenden dieses Artikels Um ein tieferes Verständnis zu erlangen, beeilen Sie sich und probieren Sie es aus.
Verwandte Empfehlungen:
Detaillierte Erläuterung der .scroll()-Funktion in jQuery
Detaillierte Erläuterung der Verwendung des jQuery-Plug-ins windowScroll Codebeispiel
Die perfekte Möglichkeit, mit jQuery den Seitenscrolleffekt zu erzielen
Das obige ist der detaillierte Inhalt vonAusführliche Erklärung des Bildlaufcodes, der ein Div nach unten verschiebt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!