javascript - 如何检查滚动条是否到达了div的末尾？

Question

function yHandler () {

    var show = document.getElementById('show');
    var contentHeight = show.offsetHeight;
    var yOffset = show.pageYOffset;
    var y = yOffset + show.innerHeight;

    if(y >= contentHeight) {
        alert("ok")
        }
    }
    show.onscroll  = yHandler;

如何检查滚动条是否已到达 div 的末尾？

Answer 1

一些代码供您处理：

var scroll = document.getElementById('scroll');
var content = document.getElementById('content');

scroll.onscroll = function(){
    var total = scroll.scrollTop + scroll.clientHeight;

    if(total == content.clientHeight)
        alert('Reached bottom!');
}

http://jsfiddle.net/EY6qP/

Answer 2

Thor 的方法效果很好（+1），但您也可以依赖scrollHeight.

(function(scroll){
  scroll.onscroll = function(){
    if (scroll.scrollTop + scroll.clientHeight == scroll.scrollHeight) {
      console.log('hither!');
    }
  }
})(document.getElementById('scroll'));

Answer 3

使用scrollHeight,scrollTop和clientHeight属性来检测滚动条是否到达底端。

function handleScroll() {
    var div = document.getElementById("div-id");
    if(Math.abs(Math.round(div.scrollHeight - div.scrollTop) - div.clientHeight) > 3) {
        console.log("Scroll bar reached bottom end");   
        return true;
    }
    return false;
};