如何在 Javascript 中找到图表的当前滚动位置？

Question

我有一个可滚动的图表

我试图在用户到达红色边框的 table 底部时触发一个功能。

我采用的方法是找到图表的高度，即 1520px。

那我就需要一个方法来找到当前滚动位置的像素点，但是没有element.currentScrollPosition

这样的方法

如何找到图表的当前滚动位置？

如果结果为 0，我将从 1520px 中减去位置，看看用户是否滚动到底部。

这是每一行的代码：

function getScrollPosition() {
    const plTable = document.getElementById('plTable');
    const x = plTable?.scrollHeight;
    const y = plTable?.scrollTop;
    const z = plTable?.offsetHeight;
    console.log(x);
    console.log(y); // scroll position from top
    console.log(z);
  }


// chart component

return (
  //... skip some code
</TableHead>
                  <TableBody>
                    <div
                      id="plTable"
                      onClick={getScrollPosition}
                      style={{ border: '1px solid red' }}
                    >
                      {lineItems.map((lineItem, i) => (
                        <TableRow key={lineItem.id}>
                          <LineItemRow
                            i={i}
                            id={lineItem.id}
                            reportName={reportName}
                            level={lineItem.level}
                          />
                        </TableRow>
                      ))}
                    </div>
                  </TableBody>
                </Table>
              </Scrollbar>
            </CardContent>
          </Card>
)

我觉得 scrollTop 和 offsetHeight 不太有用，所以你可以忽略它。

此外，无论我滚动到哪里然后单击，scrollTop 总是给出 0

Answer 1

处理滚动的最佳方法是使用 Observer API 这对您的网站性能更好。

这是你必须做的：

//Add an elemnt in your html with the class of "end" at the end of the chart
//I recommend adding an empty div with the class of "end" and setting it's opacity to 0
const end =document.querySelector(".end");

const endObserver = new IntersectionObserver(function(entries){
    const [entry] = entries;
    if(entry.isIntersecting === false)
    {
    //Put what you want to happen if the end is NOT visible
    }
    else{
    //Put what you want to happen if the end is visible
    //For instance firing your function
    }
    },{root:null,threshold:1});
endObserver.observe(end);

如何在 Javascript 中找到图表的当前滚动位置？

How can I find the current scroll position of a chart in Javascript?

html

javascript

css

scroll