在浏览器滚动中查找元素的 position

Question

我需要一些有关查找元素 position 的帮助。 我正在研究电子书阅读器，还有它的所有 Html 和 css。 所有 html 逐页分段，我必须找到这样的元素

<span name="Note" style="background-color:rgb(255,255,204)">Example</span>

每个人都建议这样的代码；

function position(elem) {
    var left = 0,
        top = 0;

    do {
        left += elem.offsetLeft;
        top += elem.offsetTop;
    } while ( elem = elem.offsetParent );

    return [ left, top ];
}position(document.getElementsByName('Note')[0]);

但这对我不起作用； 我需要元素的真正 position 与 JavaScript 滚动。

Answer 1

var note = document.getElementsByName('Note')[0];
var screenPosition = note.getBoundingClientRect();

由返回的ClientRect getBoundingClientRect()具有值.top ， .left ， .right ， .bottom ， .width ，和.height 。

这些是可见窗口上的像素位置; 当你滚动页面的.top和.bottom值会发生变化，甚至可能为负的项目滚动出视图的顶部。

请注意 - 与积累offsetLeft / offsetTop的解决方案不同 - 此解决方案正确地考虑了所有浏览器（Firefox）中的body和html元素上的边框和填充。

请参阅此测试用例： http ： //jsfiddle.net/QxYDe/4/ （滚动页面并观察值的变化）。

Internet Explorer也支持 。

Answer 2

我猜你需要把音符一直固定在左上角吗？ 即使滚动？

你只能用CSS做到这一点！ :)

HTML：

<div id="Note" name="Note">Example</div>

CSS：

div #Note {
  background-color:rgb(255,255,204)
  left: 0px;
  position: absolute;
  top: 0px;
  z-index: 999;
}

@media screen {
  body > div #Note {
    position: fixed;
  }
}

编辑：有几个笔记（未测试）：

HTML：

<div id="Note1">Example</div>
<div id="Note2">Example</div>
<div id="Note3">Example</div>
<div id="Note4">Example</div>

CSS：

div #Note1 {
  background-color:rgb(255,255,204)
  left: 0px;
  height: 20px;
  position: absolute;
  top: 0px;
  z-index: 999;
}
div #Note2 {
  background-color:rgb(255,255,204)
  left: 0px;
  height: 20px;
  position: absolute;
  top: 20px;
  z-index: 999;
}
div #Note3 {
  background-color:rgb(255,255,204)
  left: 0px;
  height: 20px;
  position: absolute;
  top: 40px;
  z-index: 999;
}
div #Note4 {
  background-color:rgb(255,255,204)
  left: 0px;
  height: 20px;
  position: absolute;
  top: 60px;
  z-index: 999;
}

@media screen {
  body > div #Note1 {
    position: fixed;
  }

  body > div #Note2 {
    position: fixed;
  }

  body > div #Note3 {
    position: fixed;
  }

  body > div #Note4 {
    position: fixed;
  }
}

Answer 3

找到用于滚动的元素 position 的解决方案：

const target = document.querySelector('[name="Note"]')
window.scrollTo({
    top: Math.round(target.getBoundingClientRect().top + document.documentElement.scrollTop),
    behavior: 'smooth',
})

或者只使用scrollIntoView ：

document.querySelector('[name="Note"]').scrollIntoView({
    behavior: 'smooth',
})

Answer 4

function position( document.getElementsByName('Note')[0]) { 
    var left = 0, 
        top = 0; 

    do { 
        left += elem.offsetLeft-elem.scrollLeft; 
        top += elem.offsetTop-elem.scrollTop; 
    } while ( elem = elem.offsetParent ); 

    return [ left, top ]; 
} 

减去滚动位置。

Answer 5

解：

  <script>function showDiv() {

            var div = document.getElementById('comdiv');
            var button = document.getElementById('button');
            if (div.style.display !== "none") {
                div.style.display = "none";
                button.value = "Add Comments";

            }
            else {
                button.value = "Hide Comments";
                div.style.display = "block";
            }
            var note = document.getElementsByName("comment")[0];
            var screenPosition = note.getBoundingClientRect();
            window.scrollTo(screenPosition);
        }</script>
            <form name="form" id="form" action="" method="post">
            <textarea name="comment" id="comment" placeholder="Write Comment, Max: 140 characters" rows="4"  class="width-50" onblur="checkMe()" ></textarea>
            <input type="text" class="input-small width-33" name="name" id="name" placeholder="Name" autofocus class="width-33" onblur="checkMe()" />
            <button type="submit" name="submit" id="submitbutton" class="btn btn-green btn-outline" disabled="disabled">Post Comment</button>
        </form>

Answer 6

首先，您需要获得整个文档的高度。 整个文档的高度，滚动的部分： 链接

let scrollHeight = Math.max(
    document.body.scrollHeight, document.documentElement.scrollHeight,
    document.body.offsetHeight, document.documentElement.offsetHeight,
    document.body.clientHeight, document.documentElement.clientHeight
);

在您可以使用获取元素的scrollTop位置之后：

const element = document.getElementsByName('Note');
element.scrollTop

或者你可以去视图元素（ scrollIntoView ）

获得scrollTop位置后，我不确定你想做什么。

Answer 7

在 ANGULAR 中：

 import { ViewChild, AfterViewInit } from '@angular/core'; ... export class NewTrendingComponent implements AfterViewInit { @ViewChild('theElementInQuestion') public trendyElement:; ElementRef: ngAfterViewInit(). void { // log the top pixel value of the element in question console.log(this.trendyElement.nativeElement.offsetTop) } }

 ... <div #theElementInQuestion> this is the element you are looking for... </div>...

注意：如果您使用像 ngIf 这样的结构指令，您想查看元素何时会呈现（通常在 ViewInit if | async 之后使用 / 之后）。 或者考虑使用 {static: true} 选项。

@ViewChild('theElementInQuestion', {static: true}) public trendyElement!: ElementRef;