Javascript 在浏览器滚动中查找元素的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8070639/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Find element's position in browser scroll
提问by relower
i need some help about finding elements position. im working on an e-book reader, also its all Html with css. All html sectioned page by page, and i have to find an element like this
我需要一些有关查找元素位置的帮助。我正在开发一个电子书阅读器，它也是带有 css 的所有 Html。所有 html 逐页分段，我必须找到这样的元素
<span name="Note" style="background-color:rgb(255,255,204)">Example</span>
<span name="Note" style="background-color:rgb(255,255,204)">Example</span>
Everyone suggests code like this;
每个人都建议这样的代码；
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]);
but it does not work for me; I need element's real position in scroll with JavaScript.
但这对我不起作用；我需要元素在 JavaScript 滚动中的真实位置。
回答by Phrogz
var note = document.getElementsByName('Note')[0];
var screenPosition = note.getBoundingClientRect();
The ClientRect returned by getBoundingClientRect()has values for .top, .left, .right, .bottom, .width, and .height.
通过返回的ClientRectgetBoundingClientRect()有值.top，.left，.right，.bottom，.width，和.height。
These are pixel positions on the visible window; as you scroll the page the .topand .bottomvalues will change, and may even become negative as the item scrolls off the top of the view.
这些是可见窗口上的像素位置；当您滚动页面时，.top和.bottom值会发生变化，甚至可能会随着项目从视图顶部滚动而变为负值。
Note that—unlike the solution accumulating offsetLeft/offsetTop—this solution properly accounts for borders and padding on the bodyand htmlelements in all browsers (Firefox).
请注意——与累积offsetLeft/的解决方案不同——该解决offsetTop方案正确地考虑了所有浏览器 (Firefox) 中body和html元素上的边框和填充。
See this test case: http://jsfiddle.net/QxYDe/4/(scroll the page and watch the values change).
请参阅此测试用例：http: //jsfiddle.net/QxYDe/4/（滚动页面并观察值的变化）。
回答by Behrens
My guess is that you need the note to stay fixed to the top left corner at all times? Even when scrolled?
我的猜测是您需要将便条始终固定在左上角？即使滚动？
You can do this with CSS only! :)
你只能用 CSS 做到这一点！:)
HTML:
HTML：
<div id="Note" name="Note">Example</div>
CSS:
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;
}
}
EDIT:With several notes (not tested):
编辑：有几个注释（未测试）：
HTML:
HTML：
<div id="Note1">Example</div>
<div id="Note2">Example</div>
<div id="Note3">Example</div>
<div id="Note4">Example</div>
CSS:
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;
}
}
回答by Niet the Dark Absol
function position(elem) {
var left = 0,
top = 0;
do {
left += elem.offsetLeft-elem.scrollLeft;
top += elem.offsetTop-elem.scrollTop;
} while ( elem = elem.offsetParent );
return [ left, top ];
}
var elem = document.getElementById('id');
position(elem);
Subtract the scroll positions.
回答by Harshal Shah
Solution:
解决方案：
<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>
回答by Danrley Willyan
First you need to get the height of entire document. Height of the whole document, with the scrolled out part: link
首先，您需要获取整个文档的高度。整个文档的高度，滚动部分：链接
let scrollHeight = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);
After you can use to get element's scrollTop position:
在您可以使用获取元素的 scrollTop 位置之后：
const element = document.getElementsByName('Note');
element.scrollTop
Or you can go to element on view (scrollIntoView)
或者您可以转到视图中的元素（scrollIntoView）
I'm not sure what you want to do after get the scrollTop position.
我不确定在获得 scrollTop 位置后您想做什么。
