BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

HTML5 における scroll-to-bottom イベントの問題を解決する方法

2022-01-29 20:32:13

問題：H5では、リストがある場合など、下までスクロールすると、さらに読み込みが必要になることがあります。

解決方法 これは、ウィンドウのスクロールイベントを使用して処理することができます。

分析 スクロールが画面全体（インターフェイスの小さな部分ではない）であれば、画面の高さ + 最大スクロール距離 = コンテンツの高さ、が成り立つはずです。

コードの実装 

<html> 
    <head> 
    <meta charset="UTF-8">
        <title> listen to scroll to bottom scroll bottom</title> 
        <style> 
.div2{
width:100px;
height:100px;
border:1px solid red
}
*{
margin:0
}
.button1:active{
   background:red
}
body{
height:375px;
width:667px;
border:1px solid red
}
.div1{
height:600px;
width:100%;
background:red
}
.div2{
height:600px;
width:100%;
background:green
}
.div3{
height:600px;
width:100%;
background:blue
}
.div4{
height:600px;
width:100%;
background:yellow
}
        </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(){
  //Get the container's parent element
    var div0 = document.getElementsByClassName('div0')[0];
    //height Calculate the height of the attribute
    var height = parseInt((window.getComputedStyle(div0, null).height).replace('px', ''));
    console.log(height,"div0's calculated height")
    window.onscroll = function(){
/*
scrollTop is the distance of the top of the scrollbar from the top-right corner of the interface, here it is written in compatibility
*/
let scrollTop = document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
     //+-5 is to ensure a certain flexibility, not to be exactly equal before departure.
    if(height-5<=scrollTop+clientHeight&&scrollTop+clientHeight<=height+5){
      console.log('Listening success','reached bottom')
    }
    }
    }
    </script>
</html>

関連するコードのメモです。多くの場合、リストが読み込まれ、子要素を読み込む親コンテナの高さを設定することはできませんが、このとき、スタイルを auto に設定すると element.style.height もautoに等しくなるため、推奨されるのは clientHeight を使用するか、計算スタイル getComputedStyle 高さを計算する

要約

以上、HTML5でイベントの下までスクロールする問題を解決するための小さな紹介でした、お役に立てれば幸いです、もし何か質問があれば、私にメッセージをください、すぐに返信します。これからもスクリプトハウスのウェブサイトをよろしくお願いします。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します