检测是否滚动到底部

Question

如何使用按钮点击功能（不是滚动箭头按钮）检测div是否已滚动到底部？

例如：当点击$('#checkBottom').时，如果$('#items')已滚动到div的底部，则会输出警报。单击$('#checkBottom').时，如果$('#items')未滚动到div的底部，则不会输出警报。

JQ：

$('#checkBottom').on('click', function () {
    alert("yes, it has reached the bottom of the scroll");
});

滚动div结构示例：

<div id="Wrapper">
    <div id="itemWrapper">
        <div id="items">
            <div class="content">
                <input type="image" src="http://img42.com/p1puE+" />
            </div>
            <div class="content">
                <input type="image" src="http://img42.com/p1puE+" />
            </div>
            <div class="content">
                <input type="image" src="http://img42.com/p1puE+" />
            </div>
        </div>
    </div>
</div>

Answer 1

$('#checkBottom').on('click', function () {
  var wrapper = document.getElementById('Wrapper');
  if (wrapper.scrollTop + wrapper.offsetHeight >= wrapper.scrollHeight) {
    alert("yes, it has reached the bottom of the scroll");
  }
});