我可以在整个页面上获取我单击的元素的 y 坐标吗？

如何解决我可以在整个页面上获取我单击的元素的 y 坐标吗？

我有关于 Y 坐标的大数据 - 有虚拟滚动，滚动页面上有很多项目。当我单击数据时，会为单击的元素显示其他数据。这使我的页面对用户不友好，因为有时附加数据很大 - 当附加数据折叠时，有时滚动会自动向下滚动，用户需要向上滚动一点才能看到数据...

我需要当用户点击元素时 - 页面自动向上或向下滚动到 Y 坐标上点击的元素

HTML

<div *ngFor="let mainRow of tableData; let i = index;" class="card" id="mainRow-{{i}}">
   <div (click)="renderSubTable(i,mainRow,$event)">
     ... main data
   </div>

  <div *ngIf="mainRow.subTableData">
     ... additional data
  </div>

</div>

** 我试过的** TS

我试过 offsetY

  renderSubTable(numRow,event) {
   let y = pos.offsetY;
   window.scroll(0,y);
}

但这仅需要视口的 Y 坐标 - 而不是在整个页面上。 PageY 也不起作用。

我该如何解决我的问题

解决方法

jQuery offset 为您提供绝对位置（相对于文档）：

const el = document.getElementById('el');
el.onclick = function() {
    const offset = $("#el").offset();
    window.scroll(0,offset.top);
    console.log(offset);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 1000px; background: blue; padding-top:200px">
  <div id="el" style="height: 100px; width: 100px; background: red; margin: 0 50px;">

  </div>
</div>

这是 Angular 的代码片段

模板

<div style="height: 1000px; background: blue; padding-top:200px">
  <div (click)="onClick($event)" style="height: 100px; width: 100px; background: red; margin: 0 50px;">

  </div>
</div>

控制器

import { Component } from "@angular/core";

import $ from "jquery";

@Component({
  selector: "my-app",templateUrl: "./app.component.html",styleUrls: ["./app.component.css"]
})
export class AppComponent {
  onClick(event: MouseEvent) {
    const offset = $(event.target).offset();
    window.scroll(0,offset.top);
    console.log(offset);
  }
}

您可以在 Stackblitz

上进行测试 ,

没有一个确切的例子很难说（你的 HTML 是如何构建的），但你也应该看看：

（在元素的 api 上做而不是在窗口 api 上） https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll 和 https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView