Javascript: Detect Scroll End

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.

Detecting end of scroll in a div

You can use element.scrollTop + element.offsetHeight>= element.scrollHeight to detect scroll end.

Update:
Also adding a condition so that it won't fire when scrolling upwards.
For more on upward scroll condition,you can check this link.

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>

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.

How to detect if browser window is scrolled to bottom?

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        // you're at the bottom of the page
    }
};

See demo

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
)

javascript detect scrolling past the end of the window when scroll event doesn't fire

Change keyword scroll to wheel,
this event fires when you try to scroll from mouse/pad(using fingers)even there is not scroll

window.addEventListener("wheel", () => {
  console.log("event fires")
})

Detecting when user scrolls to bottom of div with React js

you can use el.getBoundingClientRect().bottom to check if the bottom has been viewed

isBottom(el) {
  return el.getBoundingClientRect().bottom <= window.innerHeight;
}

componentDidMount() {
  document.addEventListener('scroll', this.trackScrolling);
}

componentWillUnmount() {
  document.removeEventListener('scroll', this.trackScrolling);
}

trackScrolling = () => {
  const wrappedElement = document.getElementById('header');
  if (this.isBottom(wrappedElement)) {
    console.log('header bottom reached');
    document.removeEventListener('scroll', this.trackScrolling);
  }
};

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 the end of a horizontal scroll in a div?

Use scrollWidth and width along with your leftscrollwidth to get the difference. In your case there is offset of 8 so it will give the difference of 8 it may be because of your padding or margin.

var $elem=$('#scrollquestion');
var newScrollLeft = $elem.scrollLeft(),
    width=$elem.width(),
    scrollWidth=$elem.get(0).scrollWidth;
var offset=8;
if (scrollWidth- newScrollLeft-width==offset) {
    alert('right end');
}

Live Demo

Use the outerWidth() to get the offset including the width like,

var $elem=$('#scrollquestion');
var newScrollLeft = $elem.scrollLeft(),
    width=$elem.outerWidth(),
    scrollWidth=$elem.get(0).scrollWidth;
if (scrollWidth-newScrollLeft==width) {
    alert('right end');
}

Another Demo without using offset

---

Related Topics