Jak określić, bez korzystania z jQuery lub innej biblioteki JavaScript, czy element DIV z pionowym paskiem przewijania jest przewijany do samego dołu?
Moje pytanie nie dotyczy tego, jak przewinąć do dołu. Wiem, jak to zrobić. Chcę sprawdzić, czy element DIV jest już przewinięty na sam dół.
To nie działa:
if (objDiv.scrollTop == objDiv.scrollHeight)
javascript
scroll
scrollbar
Bjorn
źródło
źródło
Odpowiedzi:
Jesteś całkiem blisko
scrollTop == scrollHeight.scrollTopodnosi się do górnej części pozycji przewijania, która będziescrollHeight - offsetHeightTwoje stwierdzenie if powinno wyglądać tak (nie zapomnij użyć potrójnych równych):
if( obj.scrollTop === (obj.scrollHeight - obj.offsetHeight)) { }Edycja: poprawiłem moją odpowiedź, była całkowicie błędna
źródło
scrollTopmoże być nieintegralna, więc wymaga to pewnej tolerancji (powiedzmyobj.scrollHeight - obj.offsetHeight - obj.scrollTop < 1), aby działać w każdych okolicznościach. Zobacz stackoverflow.com/questions/5828275/…document.body.scrollHeightrówna siędocument.body.offsetHeightw moim przypadku (Chrome)Aby uzyskać prawidłowe wyniki, biorąc pod uwagę takie rzeczy, jak możliwość obramowania, poziomego paska przewijania i / lub liczby pływających pikseli, należy użyć ...
el.scrollHeight - el.scrollTop - el.clientHeight < 1UWAGA: MUSISZ użyć parametru clientHeight zamiast offsetHeight, jeśli chcesz uzyskać prawidłowe wyniki. offsetHeight poda poprawne wyniki tylko wtedy, gdy el nie ma obramowania ani poziomego paska przewijania
źródło
@scroll="scrolling"a następnie w metodachscrolling(event) { event.target // as el in the answer }PowodzeniaTrochę późno na tę imprezę, ale żadna z powyższych odpowiedzi nie wydaje się działać szczególnie dobrze, gdy ...
Aby uwzględnić wszystkie ewentualności, musisz zaokrąglić w górę obliczoną pozycję przewijania:
Math.ceil(element.scrollHeight - element.scrollTop) === element.clientHeightźródło
Zwraca true, jeśli element znajduje się na końcu swojego przewijania, false, jeśli tak nie jest.
Mozilla Developer Network
źródło
document.body.scrollHeightidocument.bodyclientHeightmają tę samą wartość, więc wyrażenie nigdy nie jest prawdziwe.<!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>U mnie to działa, mam nadzieję, że to również pomoże. Dzięki.
źródło
Cóż, zadałem sobie to samo pytanie i znalazłem w ten sposób, tutaj umieściłem przykład za pomocą zdarzenia:
let scrollableElement = document.querySelector(".elementScrollable") scrollableElement.addEventListener("scroll",function(event){ if(event.target.scrollTop === event.target.scrollTopMax){ console.log("The scroll arrived at bottom") } })źródło
Ten działa dla mnie. Nieco inne podejście.
if (list.scrollTop + list.clientHeight >= list.scrollHeight - 1) { return 'scrollOnTheBottom'; }źródło
Rozwiązanie, które znalazłem na https://www.geeksforgeeks.org/how-to-detect-when-user-scrolls-to-the-bottom-of-a-div/ Pracowało dla mnie, mam nadzieję, że zadziała również dla Ciebie .
$(window).on('scroll', function() { if ($(window).scrollTop() >= $( '.div').offset().top + $('.div'). outerHeight() - window.innerHeight) { alert('You reached the end of the DIV'); } });źródło