質問: H5 では、このような要件があります。たとえば、リストがある場合、一番下までスクロールするときにさらに読み込む必要があります。
解決策: ウィンドウのスクロール イベントを処理に使用できます。
分析: スクロールが画面全体に対するものである場合 (特定のインターフェイス ブロックに対するものではない)、次のようになります: 画面の高さ + 最大スクロール距離 = コンテンツの高さ
コードの実装:
<html> <head> <meta charset=UTF-8> <title>下までスクロールして聞く</title> <style> .div2{width:100px;height:100px;border:1px 赤一色}*{マージン :0}.button1:active{background:red}body{高さ:375px;幅:667px;ボーダー:1px ソリッド赤}.div1{高さ:600px;幅:100%;背景:赤}.div2{高さ:600px;幅:100%;背景:緑}.div3{高さ:600px;幅:100%;背景:青} .div4{高さ:600px;幅:100%;背景:黄色} </style> </head> <body> <div class=div0> <div class=div1></div> <div class=div2></div> <div class=div3></div> <div class=div4>< /div> <div class=div5></div> </div> </body> <script> window.onload = function(){ //コンテナの親要素を取得します var div0 = document.getElementsByClassName('div0') [ 0]; // 高さ計算された属性の高さ var height = parseInt((window.getComputedStyle(div0, null).height).replace('px', '')); console.log(height, div0 の計算された高さ) window.onscroll = function( ){/*scrollTop はスクロール バーの上部とインターフェイスの右上隅の間の距離です。ここでは互換性のある書き込みメソッドが使用されます*/letscrollTop = document.documentElement &&。 document.documentElement.scrollTop ? document.documentElement.scrollTop : //+-5 はある程度の柔軟性を確保するためのものであり、正確に等しい必要はありません。 clientHeight&&scrollTop+clientHeight< =height+5){ console.log('リスニングに成功しました', '一番下に到着しました') } } } </script></html>コードの関連説明: リストがロードされるとき、多くの場合、子要素をロードする親コンテナーの高さを設定できません。このとき、スタイルが auto に設定されている場合、 element.style.heightも次と等しくなります。 auto clientHeightを使用するか、 getComputedStyle高さを計算する計算スタイルを使用することをお勧めします。
要約する
上記は、HTML5 で一番下のイベントにスクロールする問題を解決するためにエディターが紹介したものです。ご質問があれば、メッセージを残してください。エディターが返信します。時間。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！
この記事が役立つと思われる場合は、転載していただいてかまいませんので、出典を明記してください。ありがとうございます。