js控制移动到底部触发

Question

$(window).scroll(function () {
  var scrollTop = $(this).scrollTop()
  var windowHeight = $(this).height()
  var scrollHeight = $(document).height()
  console.log('-----------------------')
  if((scrollTop+windowHeight)>scrollHeight){
    console.log('bottom')
  }

  console.log(`scrollTop: ${scrollTop}`)
  console.log(`windowHeight: ${windowHeight}`)
  console.log(`scrollHeight: ${scrollHeight}`)

})

想要移动底部触发事件，是我哪里写的不对吗，一直不能正确获取

Answer 1

问题可能是没加DOCTYPE，在此的情况下，$(document).height()=$(window).height()。

$(document).height()表示在网页实际内容高度没有满一屏时表示整个窗口的高度(窗口放大缩小时这个值会变化)，页当超过一屏时表示为整个网页内容的实际高度。
$(window).height()在设DOCTYPE时无论网页内容实际高度超不超出满屏情况下，都等于是整个窗口的高度，如果没有设DOCTYPE则$(window).height()=$(document).height()。

Answer 2

  var 
   scrollTo,
   docHeight,
   windowHeight;
  window.onscroll=function() {
     scrollTo = document.documentElement.scrollTop||document.body.scrollTop;
     docHeight = document.body.offsetHeight;
     windowHeight  = window.innerHeight;

    scrollPercent = ((scrollTo / (docHeight-windowHeight)) * 100).toFixed(1);
    //console.log(scrollPercent);
    if(scrollPercent >= 100) {
          //到底了
    }
  }

这段代码可以计算滚动条 滚动的百分比，当 scrollPercent等于100的时候就是到底部了

Answer 3

let dom = document.body
let sh = dom.scrollHeight
let ch = dom.clientHeight
let top = dom.scrollTop + 20
if (sh - ch <= top) {

....

}