divが一番下までスクロールされているかどうかを確認するにはどうすればよいですか？

84

jQueryやその他のJavaScriptライブラリを使用せずに、垂直スクロールバーのあるdivが一番下までスクロールされているかどうかを確認するにはどうすればよいですか？

私の質問は、一番下までスクロールする方法ではありません。私はそれを行う方法を知っています。divがすでに一番下までスクロールされているかどうかを確認したいと思います。

これは動作しません：

if (objDiv.scrollTop == objDiv.scrollHeight)

javascript scroll scrollbar

— ビョルン
ソース

ここで推測するだけです（objDiv.scrollTop> objDiv.scrollHeight）そしてscrollHeightからスクロール矢印のサイズを縮小する必要があるかもしれません（たとえば20px）

— Itay Moav -Malimovka 2009年

いくつかのドキュメント： developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight ... ... ... developer.mozilla.org/en-US/docs/Web/API/HTMLElement/… ... ... ... api.jquery.com/height ... ... ... api.jquery.com/innerheight ... ... ... api.jquery.com/outerheight

— Muhammad Umer 2015

105

を使用してかなり近いですscrollTop == scrollHeight。

scrollTop スクロール位置の上部を指します。 scrollHeight - offsetHeight

ifステートメントは次のようになります（トリプルイコールを使用することを忘れないでください）：

if( obj.scrollTop === (obj.scrollHeight - obj.offsetHeight))
{
}

編集：私の答えを修正しました、完全に間違っていました

— ジェームズデイビス
ソース

4

これはほぼ機能します。scrollHeight-offsetHeightはscrollTopとまったく同じ値ではありませんが、コードを試した後、その差が5ピクセル未満である必要がある場合は、必要な動作が得られます。

— ビョルン

1

これは正確ではありません。obj.borderWidthを考慮する必要があります

— ループ

2

私はこの答えが好きです：stackoverflow.com/questions/5828275/…–

— クリス

3

scrollTop非整数になる可能性があるためobj.scrollHeight - obj.offsetHeight - obj.scrollTop < 1、すべての状況で機能するには、ある程度の許容範囲（たとえば）が必要です。stackoverflow.com/questions/5828275/を

— Chris Martin

多分それは私のレイアウトの固定要素または私がしている他の奇妙な何かと関係がありますが、これが真であると評価されるのは私が一番上までスクロールするときだけです。これは、私のインスタンス（Chrome）でdocument.body.scrollHeight等しいためですdocument.body.offsetHeight

— Evan de la Cruz

24

境界線、水平スクロールバー、フローティングピクセル数などを考慮して正しい結果を得るには、次を使用する必要があります...

el.scrollHeight - el.scrollTop - el.clientHeight < 1

注：正しい結果を得るには、offsetHeightの代わりにclientHeightを使用する必要があります。offsetHeightは、elに境界線または水平スクロールバーがない場合にのみ正しい結果を提供します

— スペンサー
ソース

また、私のために働いた唯一の答え。スクロールバーを非表示にするためにパディングを使用しています。

— クレイグ

clientHeightは本当にうまく機能しました。受け入れられた回答でoffsetHeightを使用すると、100％正確ではない結果が得られました

— FinlayRoelofs19年

エレガント、ありがとう..スクロールイベントでVueと一緒に使用して@scroll="scrolling"から、メソッドで使用することもできますscrolling(event) { event.target // as el in the answer }幸運

— Yassine Sedrani

10

このパーティーには少し遅れましたが、上記の答えはどれも特にうまく機能していないようです...

ディスプレイのスケーリングは、UHDディスプレイのOSに適用されます
スケーリング/ズームがブラウザに適用されます

すべての不測の事態に対応するには、計算されたスクロール位置を切り上げる必要があります。

Math.ceil(element.scrollHeight - element.scrollTop) === element.clientHeight

— マシューレイトン
ソース

この回答は、正しく機能する最初の回答です（stackoverflow.com/q/5828275からの回答もテストしました）。他の人が言及しているように、マージン、ズーム、その他の要因が関係しています–そしてこれはそれらすべてを処理しているようです。編集：以下のスペンサーの答えは基本的に同じで、正しいようです。

— ヤンBradáč

8

要素がスクロールの最後にある場合はtrueを返し、そうでない場合はfalseを返します。

element.scrollHeight - element.scrollTop === element.clientHeight

Mozilla Developer Network

— エマニュエル・オシモス
ソース

1

私の場合、要素がdocument.bodyであるChromeを使用すると、これは機能しません。document.body.scrollHeightとdocument.bodyclientHeight同じ値を持っているので、式は決して真ではありません。

— エヴァンデラクルス

スクロールが一番下にあることを検出できるように、どのような編集を行うことができますか。たとえば、スクロールが75％未満の場合は、下の方にあると考えてください

— iamsaksham 2017

0

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>JQuery | Detecting when user scrolls to bottom of div. 
    </title> 
</head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 

<body style="text-align:center;" id="body"> 
    <h1 style="color:green;">  
            Data Center  
        </h1> 
    <p id="data_center" style="font-size: 17px; font-weight: bold;"></p> 
    <center> 
        <div class="div" style="width:200px; height:150px; overflow:auto;"> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
        </div> 
    </center> 
    <script> 
        $('#data_center').text('Scroll till bottom to get alert!'); 
        jQuery(function($) { 
            $('.div').on('scroll', function() { 
                if ($(this).scrollTop() + $(this).innerHeight() >=  $(this)[0].scrollHeight) {                     
                    alert('End of DIV has reached!'); 
                } 
            }); 
        }); 
    </script> 
</body> 

</html>

それは私のために働きます、私は願っています、これはあなたにも役立つでしょう。ありがとう。

— カムレッシュ
ソース

0

さて、私は自分自身に同じことを尋ねました、そして私はこのように見つけました、ここで私はイベントを使って例を置きます：

let scrollableElement = document.querySelector(".elementScrollable")

scrollableElement.addEventListener("scroll",function(event){
  if(event.target.scrollTop === event.target.scrollTopMax){
        console.log("The scroll arrived at bottom")
  }
})

— エリオットウィリアムソン
ソース

0

これは私のために働きます。少し異なるアプローチ。

if (list.scrollTop + list.clientHeight >= list.scrollHeight - 1) {
    return 'scrollOnTheBottom';
}

— Aleks Grunwald
ソース

0

https://www.geeksforgeeks.org/how-to-detect-when-user-scrolls-to-the-bottom-of-a-div/で見つけた解決策は私のために働いた、それがあなたのためにも働くことを願っています。

$(window).on('scroll', function() { 
    if ($(window).scrollTop() >= $( 
        '.div').offset().top + $('.div'). 
        outerHeight() - window.innerHeight) { 
            alert('You reached the end of the DIV'); 
        } 
});

— ひまんしゅパトニ
ソース