检测天气用户是否在反应js和javascript中滚动div的底部

Question

我想在表格中实现无限滚动，所以我以一种可能的方式计算 div 高度，你可以在下面看到

 let fixedCh = e.target.clientHeight;
 let calCh = e.target.scrollHeight - e.target.scrollTop;
 if (fixedCh === calCh) {
      alert('load more');
    }

在这种方法中，calCh 因分辨率不同而不同。 有没有其他方法可以做到这一点，以便它可以通过各种浏览器和屏幕分辨率工作

Answer 1

你的方法很好； 您需要在用户加载页面时首先调用您的 function 以检查用户的屏幕分辨率是否已经到滚动的末尾，调用“alert（'load more'）”。

问题是对于某些用户，根据他们的屏幕，滚动条将不可见，因此您event of scroll不会检查元素。 要解决这个问题，正如我上面所说，您需要在“Dom 准备就绪”时首先加载屏幕检查 function。

下面是基本实现：

function loadMore (e) {
  let fixedCh = e.clientHeight;
  let calCh = e.scrollHeight - e.scrollTop;
  if (fixedCh === calCh) {
    alert('load more');
  }
}

// listen on scroll and check target element fixedCh === calCh
function listenOnScroll() {
  document.getElementById('app').addEventListener('scroll', (e) => {
    loadMore(e.target)
  })
},


window.onload = (event) => {
  loadMore(document.getElementById('app').target)
};

当dom准备好或加载并传递目标Dom元素时，我将调用function “loadMore” 。

稍后，我将调用“listenOnScroll” function 来监听目标元素滚动，然后从中调用“loadMore” function。