Wie kann ich feststellen, ob ein Div nach unten gescrollt wird?

Question 1

Wie kann ich ohne Verwendung von jQuery oder einer anderen JavaScript-Bibliothek feststellen, ob ein Div mit einer vertikalen Bildlaufleiste ganz nach unten gescrollt wird?

Meine Frage ist nicht, wie man nach unten scrollen soll. Ich weiß, wie das geht. Ich möchte feststellen, ob das Div bereits nach unten gescrollt ist.

Das funktioniert nicht:

if (objDiv.scrollTop == objDiv.scrollHeight)

Question 2

Du bist ziemlich nah dran scrollTop == scrollHeight.

scrollTop bezieht sich auf den oberen Rand der Bildlaufposition scrollHeight - offsetHeight

Ihre if-Anweisung sollte so aussehen (vergessen Sie nicht, Triple Equals zu verwenden):

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

Edit: Meine Antwort wurde korrigiert, war völlig falsch

Question 3

Um die richtigen Ergebnisse zu erzielen, wenn Sie Dinge wie die Möglichkeit eines Rahmens, einer horizontalen Bildlaufleiste und / oder einer schwebenden Pixelanzahl berücksichtigen, sollten Sie ...

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

HINWEIS: Sie MÜSSEN clientHeight anstelle von offsetHeight verwenden, wenn Sie die richtigen Ergebnisse erzielen möchten. offsetHeight liefert nur dann korrekte Ergebnisse, wenn el keinen Rand oder keine horizontale Bildlaufleiste hat

Question 4

Wenig spät zu dieser Party, aber keine der oben genannten Antworten scheint besonders gut zu funktionieren, wenn ...

Die Anzeigeskalierung wird auf das Betriebssystem für UHD-Anzeigen angewendet
Skalierung / Zoom wird auf den Browser angewendet

Um alle Eventualitäten zu berücksichtigen, müssen Sie die berechnete Bildlaufposition aufrunden:

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

Question 5

Gibt true zurück, wenn sich ein Element am Ende seines Bildlaufs befindet, false, wenn dies nicht der Fall ist.

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

Mozilla Developer Network

Question 6

<!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>

Es funktioniert bei mir, ich hoffe, das wird dir auch helfen. Vielen Dank.

Question 7

Nun, ich habe mich das gleiche gefragt und diesen Weg gefunden. Hier habe ich ein Beispiel mit einem Ereignis gegeben:

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

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

Question 8

Dieser arbeitet für mich. Etwas anders.

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

Question 9

Die Lösung, die ich auf https://www.geeksforgeeks.org/how-to-detect-when-user-scrolls-to-the-bottom-of-a-div/ gefunden habe, hat für mich funktioniert, hoffe, dass sie auch für Sie funktioniert .

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

Answer 1

84

Wie kann ich ohne Verwendung von jQuery oder einer anderen JavaScript-Bibliothek feststellen, ob ein Div mit einer vertikalen Bildlaufleiste ganz nach unten gescrollt wird?

Meine Frage ist nicht, wie man nach unten scrollen soll. Ich weiß, wie das geht. Ich möchte feststellen, ob das Div bereits nach unten gescrollt ist.

Das funktioniert nicht:

if (objDiv.scrollTop == objDiv.scrollHeight)

javascript scroll scrollbar Björn
quelle

Ich rate hier nur, ob (objDiv.scrollTop> objDiv.scrollHeight) und möglicherweise die Größe des Bildlaufpfeils (sagen wir 20px) von scrollHeight reduzieren muss

Itay Moav -Malimovka

Einige Dokumentationen: 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

Answer 2

Ich rate hier nur, ob (objDiv.scrollTop> objDiv.scrollHeight) und möglicherweise die Größe des Bildlaufpfeils (sagen wir 20px) von scrollHeight reduzieren muss

Itay Moav -Malimovka

Answer 3

Einige Dokumentationen: 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

Answer 4

105

Du bist ziemlich nah dran scrollTop == scrollHeight.

scrollTop bezieht sich auf den oberen Rand der Bildlaufposition scrollHeight - offsetHeight

Ihre if-Anweisung sollte so aussehen (vergessen Sie nicht, Triple Equals zu verwenden):

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

Edit: Meine Antwort wurde korrigiert, war völlig falsch

James Davies
quelle

4

Das funktioniert fast, scrollHeight-offsetHeight ist nicht genau der gleiche Wert wie scrollTop, aber nachdem ich Ihren Code ausprobiert habe, erhalte ich das gewünschte Verhalten, wenn dieser Unterschied weniger als 5 Pixel beträgt, damit er unten liegt.

Björn

1

das ist nicht genau. obj.borderWidth muss berücksichtigt werden

Looping

2

Ich bevorzuge diese Antwort: stackoverflow.com/questions/5828275/…

Chris

3

scrollTopkann nicht ganzzahlig sein, daher erfordert dies eine gewisse Toleranz (z. B. obj.scrollHeight - obj.offsetHeight - obj.scrollTop < 1), um unter allen Umständen zu funktionieren. Siehe stackoverflow.com/questions/5828275/…

Chris Martin

Vielleicht hat es etwas mit den festen Elementen in meinem Layout zu tun oder etwas Seltsames, das ich mache, aber das einzige Mal, wenn dies als wahr bewertet wird, ist, wenn ich ganz nach oben scrolle. Dies liegt daran , document.body.scrollHeightequals document.body.offsetHeightin meinem Fall (Chrom)

Evan de la Cruz

Answer 5

4

Das funktioniert fast, scrollHeight-offsetHeight ist nicht genau der gleiche Wert wie scrollTop, aber nachdem ich Ihren Code ausprobiert habe, erhalte ich das gewünschte Verhalten, wenn dieser Unterschied weniger als 5 Pixel beträgt, damit er unten liegt.

Björn

Answer 6

1

das ist nicht genau. obj.borderWidth muss berücksichtigt werden

Looping

Answer 7

2

Ich bevorzuge diese Antwort: stackoverflow.com/questions/5828275/…

Chris

Answer 8

3

scrollTopkann nicht ganzzahlig sein, daher erfordert dies eine gewisse Toleranz (z. B. obj.scrollHeight - obj.offsetHeight - obj.scrollTop < 1), um unter allen Umständen zu funktionieren. Siehe stackoverflow.com/questions/5828275/…

Chris Martin

Answer 9

Vielleicht hat es etwas mit den festen Elementen in meinem Layout zu tun oder etwas Seltsames, das ich mache, aber das einzige Mal, wenn dies als wahr bewertet wird, ist, wenn ich ganz nach oben scrolle. Dies liegt daran , document.body.scrollHeightequals document.body.offsetHeightin meinem Fall (Chrom)

Evan de la Cruz

Answer 10

24

Um die richtigen Ergebnisse zu erzielen, wenn Sie Dinge wie die Möglichkeit eines Rahmens, einer horizontalen Bildlaufleiste und / oder einer schwebenden Pixelanzahl berücksichtigen, sollten Sie ...

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

HINWEIS: Sie MÜSSEN clientHeight anstelle von offsetHeight verwenden, wenn Sie die richtigen Ergebnisse erzielen möchten. offsetHeight liefert nur dann korrekte Ergebnisse, wenn el keinen Rand oder keine horizontale Bildlaufleiste hat

Spencer
quelle

Auch die einzige Antwort, die bei mir funktioniert hat. Ich verwende Polsterung, um die Bildlaufleiste auszublenden.

Craig

clientHeight hat wirklich gut funktioniert. Die Verwendung von offsetHeight in der akzeptierten Antwort ergab ein Ergebnis, das nicht 100% genau war

Finlay Roelofs

elegant, danke .. du kannst es auch mit Vue in einem Scroll-Event verwenden, @scroll="scrolling"dann in den Methoden scrolling(event) { event.target // as el in the answer }Viel Glück

Yassine Sedrani

Answer 11

Auch die einzige Antwort, die bei mir funktioniert hat. Ich verwende Polsterung, um die Bildlaufleiste auszublenden.

Craig

Answer 12

clientHeight hat wirklich gut funktioniert. Die Verwendung von offsetHeight in der akzeptierten Antwort ergab ein Ergebnis, das nicht 100% genau war

Finlay Roelofs

Answer 13

elegant, danke .. du kannst es auch mit Vue in einem Scroll-Event verwenden, @scroll="scrolling"dann in den Methoden scrolling(event) { event.target // as el in the answer }Viel Glück

Yassine Sedrani

Answer 14

10

Wenig spät zu dieser Party, aber keine der oben genannten Antworten scheint besonders gut zu funktionieren, wenn ...

Die Anzeigeskalierung wird auf das Betriebssystem für UHD-Anzeigen angewendet
Skalierung / Zoom wird auf den Browser angewendet

Um alle Eventualitäten zu berücksichtigen, müssen Sie die berechnete Bildlaufposition aufrunden:

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

Matthew Layton
quelle

Diese Antwort ist die erste, die ordnungsgemäß funktioniert (ich habe auch die Antworten von stackoverflow.com/q/5828275 getestet ). Wie andere bereits erwähnt haben, spielen Ränder, Zoom und andere Faktoren eine Rolle - und dies scheint sie alle zu bewältigen. Bearbeiten: Spencers Antwort unten scheint im Grunde die gleiche zu sein, auch richtig.

Jan Bradáč

Answer 15

Diese Antwort ist die erste, die ordnungsgemäß funktioniert (ich habe auch die Antworten von stackoverflow.com/q/5828275 getestet ). Wie andere bereits erwähnt haben, spielen Ränder, Zoom und andere Faktoren eine Rolle - und dies scheint sie alle zu bewältigen. Bearbeiten: Spencers Antwort unten scheint im Grunde die gleiche zu sein, auch richtig.

Jan Bradáč

Answer 16

8

Gibt true zurück, wenn sich ein Element am Ende seines Bildlaufs befindet, false, wenn dies nicht der Fall ist.

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

Mozilla Developer Network

Emmanuel Osimosu
quelle

1

Bei Verwendung von Chrome, bei dem das Element document.body ist, funktioniert dies nicht. document.body.scrollHeightund document.bodyclientHeighthaben den gleichen Wert und so ist der Ausdruck nie wahr.

Evan de la Cruz

Welche Bearbeitung können wir durchführen, damit wir erkennen können, dass sich die Schriftrolle in der Nähe des unteren Bereichs befindet? Wenn zum Beispiel die Schriftrolle unter 75% liegt, betrachten Sie sie als nahe am Boden

iamsaksham

Answer 17

1

Bei Verwendung von Chrome, bei dem das Element document.body ist, funktioniert dies nicht. document.body.scrollHeightund document.bodyclientHeighthaben den gleichen Wert und so ist der Ausdruck nie wahr.

Evan de la Cruz

Answer 18

Welche Bearbeitung können wir durchführen, damit wir erkennen können, dass sich die Schriftrolle in der Nähe des unteren Bereichs befindet? Wenn zum Beispiel die Schriftrolle unter 75% liegt, betrachten Sie sie als nahe am Boden

iamsaksham

Answer 19

<!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>

Es funktioniert bei mir, ich hoffe, das wird dir auch helfen. Vielen Dank.

Answer 20

Nun, ich habe mich das gleiche gefragt und diesen Weg gefunden. Hier habe ich ein Beispiel mit einem Ereignis gegeben:

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

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

Answer 21

0

Dieser arbeitet für mich. Etwas anders.

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

Aleks Grunwald
quelle

Answer 22

Die Lösung, die ich auf https://www.geeksforgeeks.org/how-to-detect-when-user-scrolls-to-the-bottom-of-a-div/ gefunden habe, hat für mich funktioniert, hoffe, dass sie auch für Sie funktioniert .

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

Wie kann ich feststellen, ob ein Div nach unten gescrollt wird?

Antworten: