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

Posted 2023-03-06

【中文标题】检测天气用户是不是在反应js和javascript中滚动div的底部

【英文标题】：Detecting weather user scrolls the bottom of the div or not in react js and javascript检测天气用户是否在反应js和javascript中滚动div的底部

【发布时间】：2021-06-19 20:53:42

【问题描述】：

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

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

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

【问题讨论】：

这有帮助吗？ ***.com/questions/3962558/…

【参考方案1】：

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

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

以下是基本实现：

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 准备好或加载时，我将调用函数 "loadMore" 并传递目标 Dom 元素。

稍后，我将调用 "listenOnScroll" 函数来监听目标元素滚动，然后从中调用 "loadMore" 函数。

【讨论】：

分辨率怎么样？它不适用于我朋友的笔记本电脑，但对我有用。

在你的例子中，上面的代码只关心目标元素的高度。如果你朋友的笔记本电脑有变化，那是因为你的目标元素的滚动高度和clientHeight小于他/她的屏幕分辨率。

@SupriyaKumari 我更新了答案，希望对你有所帮助。