I Want to Detect the End of Scroll Event

const element = document.getElementById('element');
let lastScrollTop = 0;
element.onscroll = (e)=>{
if (element.scrollTop < lastScrollTop){
      // upscroll 
      return;
   } 
   lastScrollTop = element.scrollTop <= 0 ? 0 : element.scrollTop;
    if (element.scrollTop + element.offsetHeight>= element.scrollHeight ){
       console.log("End");
    }
}

#element{
  background:red;
  max-height:300px;
  overflow:scroll;
}
.item{
height:100px;
}

<div id="element">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>

How to detect the end of the list element on scroll event?

You can use onScroll event for parent div:

const onScroll = (event) => {
  var element = event.target;
  if (element.scrollHeight - element.scrollTop === element.clientHeight)
  {
      console.log(dataArray[dataArray.length - 1]);
  }
} 

See in playground: https://codesandbox.io/s/react-window-detect-last-element-on-scrolling-down-c4sv0?file=/src/index.js

Detecting continuious scrolling after end of page scroll

You can add a variable to indicate the first-time end of scroll, and then check that variable to know if the user continued scrolling.

function scrolling()
{
    let scrollView = document.getElementById('field-scroll');

    if($(scrollView).scrollTop() + $(scrollView).innerHeight()>=$(scrollView)[0].scrollHeight)
    {
        // first end of scroll
        window.endOfScroll = true;
    } else {
        // unset the variable
        window.endOfScroll = null;
    }
}

Also, you need to listen for scrolling events. Add these outside of the scrolling function.

const scrollView = document.getElementById('field-scroll');

// mouse wheel
scrollView.addEventListener("wheel", event => {
    const direction = Math.sign(event.deltaY);
    // if user is scrolling down at end of scroll
    if (direction === 1 && window.endOfScroll) {
        showMore();
    }
});

// down arrow
scrollView.addEventListener("keydown", event => {
    // if user is pressing down arrow at end of scroll
    // 40 is the keycode for down arrow
    if (event.keyCode === 40 && window.endOfScroll) {
        showMore();
    }
});

How to detect end of scrolling

is this what you're trying to achieve:

$('body').animate( {scrollTop: $('#foo').offset().top},1000,function(){
 alert('stop scrolling');   
});

http://jsfiddle.net/yhnKR/2/

You don't have to watch the scroll event if you animate the scroll with jquery.

---

Ok, if you want to detect when the user stopped scrolling, you'll have to use a timeout to check if the user stopped. Otherwise you'll get the event for each scroll step.
Like this:

var delay = 1000;
var timeout = null;
$(window).bind('scroll',function(){
    clearTimeout(timeout);
    timeout = setTimeout(function(){
        alert('scrolling stopped');
    },delay);
});​​​​​​​​​​

http://jsfiddle.net/yhnKR/4/

How can I detect scroll end of the specified element by JavaScript?

Fixed.

document.getElementById('box').addEventListener(
    'scroll',
    function()
    {
        var scrollTop = document.getElementById('box').scrollTop;
        var scrollHeight = document.getElementById('box').scrollHeight; // added
        var offsetHeight = document.getElementById('box').offsetHeight;
        // var clientHeight = document.getElementById('box').clientHeight;
        var contentHeight = scrollHeight - offsetHeight; // added
        if (contentHeight <= scrollTop) // modified
        {
            // Now this is called when scroll end!
        }
    },
    false
)

Check if a user has scrolled to the bottom (not just the window, but any element)

Use the .scroll() event on window, like this:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});

You can test it here, this takes the top scroll of the window, so how much it's scrolled down, adds the height of the visible window and checks if that equals the height of the overall content (document). If you wanted to instead check if the user is near the bottom, it'd look something like this:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("near bottom!");
   }
});

You can test that version here, just adjust that 100 to whatever pixel from the bottom you want to trigger on.

End of a scroll event in JS or vue

Ok so I know you don't really want to use a timer but it does seem like the appropriate way to do this since we don't really have a way to determine stopped scrolling. So how about something like this:

var scroll;
window.addEventListener('scroll', function (event) {
  window.clearTimeout(scroll);
  hidestuff();
  scroll = setTimeout(function () {
    redisplay();
  }, 500);
}, false);

The above code refreshes the timer every time scroll is being triggered and if for half a second (500 milliseconds) no scroll is being performed a "stop scroll" is assumed and you call your logic to redisplay what you've hidden.

javascript: detect scroll end

The accepted answer was fundamentally flawed, it has since been deleted. The correct answer is:

function scrolled(e) {
  if (myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight) {
    scrolledToBottom(e);
  }
}

Tested this in Firefox, Chrome and Opera. It works.

---

Related Topics