时间戳

首页 > 解决方案 > 在元素内部滚动，知道什么元素是可见的

javascript - 在元素内部滚动，知道什么元素是可见的

问题描述

我有一个反应元素，它是一个模态。模态是可滚动的，我希望在 elm变量内部滚动可见的元素数量。

const Modal = (props) => {
const [elm, setElm] = useState(0)

return (
  <p>Current element is: {elm}</p>
  <element1/>
  <element2/>
  <element3/>
  <element4/>
)
}

我尝试将滚动事件添加到模态，并找出某种方法来获取滚动位置，然后将该位置与元素位置进行比较并返回结果，但所有尝试都失败了。

标签： javascripthtmlreactjsxml

解决方案

我已将状态名称切换为 page 而不是 elm，答案是：

const Modal = (props) => {
const [page, setPage] = useState(0)

function checkInView(container, element) {
    let cTop = container.scrollTop;
    let cBottom = cTop + container.clientHeight;
    let eTop = element.offsetTop;
    let eBottom = eTop + element.clientHeight;
    let isTotal = (eTop >= cTop && eBottom <= cBottom);
    let isPartial = (eTop < cTop && eBottom > cTop) || (eBottom > cBottom && eTop < cBottom)
    return  (isTotal  || isPartial);
}

    function monitorScroll() {
        let elm = document.getElementsByClassName('scrollElementClass')
        let pgs = document.getElementsByClassName('pageClass')
         elm[0] && elm[0].addEventListener('scroll', (e)=>{
                 const pages = [...pgs];
                 const arrOfBools = pages.map(page => checkInView(elm[0], page));
                 const currentPage = arrOfBools.findIndex(aob => aob === true);
                 if (currentPage !== page ) {
                     console.log('triggered')
                     setPage(currentPage)
                }
             }
         );
    }

    useEffect(()=>{
        monitorScroll()
    }, [])

return (
<div className="scrollElementClass">
  <p>Current element is: {page}</p>
  <element1 className="pageClass"/>
  <element2 className="pageClass"/>
  <element3 className="pageClass"/>
  <element4 className="pageClass"/>
) }

基本上，函数checkInView获取整个页面的高度，将元素的位置与其进行比较，计算元素是否在视图内，并执行简单的布尔方程：

>         let isTotal = (eTop >= cTop && eBottom <= cBottom);
>         let isPartial = (eTop < cTop && eBottom > cTop) || (eBottom > cBottom && eTop < cBottom)

除此之外，函数monitorScroll 通过方法获取元素getElementByClassName并插入“滚动”事件侦听器。通过 checkInView 函数映射页面来创建布尔数组。

最后，它只是在数组中获取真假位置，如果位置 0 i 为真，则表示第 0 页在视图中，如果位置 3 为真，则表示第 3 页在视图中。

推荐阅读