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

Question

我需要一些关于找到元素位置的帮助。 我正在研究一个电子书阅读器，它的所有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]);

但它对我不起作用;我需要元素在JavaScript中滚动的真实位置。

Answer 1

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

getBoundingClientRect()返回的ClientRect的值为.top，.left，.right，.bottom，.width和{{1} }。

这些是可见窗口上的像素位置;当您滚动页面时，.height和.top值会发生变化，甚至在项目滚动到视图顶部时也会变为负数。

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

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

还supported by 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

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 4

解决方案：

  <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 5

首先，您需要获取整个文档的高度。整个文档的高度，其中有滚动出的部分：link

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位置后要做什么。