滚动后在文档空间中进行协调

发布于 2025-02-12 01:22:12 字数 835 浏览 1 评论 0原文

单击页面上的某些元素后，我想在页面上的确切位置放置一个DIV。

我通过d3.js为此做到这

一点，但是，我使用

// this gets executed when clicking on an element
let p = svg.createSVGPoint();
p.x = 0;
p.y = event_desc_pos_y;
let pt = p.matrixTransform(p.getScreenCTM());
let event_desc_div = d3.select('#event_description_div')
                            .style('top', pt.y + 'px')
                            .style('left', pt.x + 'px')
                            .style('width', width + 'px');

的是

#event_description_div {
  position:absolute;
  top: 50px;
  left:50px;
  overflow-y: scroll;
  height: 100px;
}

，当我向下滚动页面时，此代码似乎将这个div的位置非常不合适（含义，而不是相对于绝对顶部的位置在页面上）

我不确定它在做什么）

pt.y和pl.x不要更改。

无论如何，它无效。放置在很大程度上取决于滚动。

无论页面是否已滚动，我如何将DIV始终放在完全相同的位置？

原文

I want to place a div in an exact location on the page after some elements on the page are clicked on.

I do this via d3.js

For that, I use

// this gets executed when clicking on an element
let p = svg.createSVGPoint();
p.x = 0;
p.y = event_desc_pos_y;
let pt = p.matrixTransform(p.getScreenCTM());
let event_desc_div = d3.select('#event_description_div')
                            .style('top', pt.y + 'px')
                            .style('left', pt.x + 'px')
                            .style('width', width + 'px');

where I also have

#event_description_div {
  position:absolute;
  top: 50px;
  left:50px;
  overflow-y: scroll;
  height: 100px;
}

however, when I have scrolled down the page, this code seems to position this div wildly out of place (meaning, not on the same location relative to the absolute top of the page)

I'm not sure what it is doing since it doesn't look like it places it within the page in absolute terms but also not even relatively on the viewed page (the position goes up in the page as I scroll down)

pt.y and pl.x do not change.

In any case, it doesn't work. The placement depends heavily on the scrolling.

How can I place the div always in the exact same place regardless of whether the page has been scrolled or not?

分享到QQ

分享到微博