Найти позицию элемента в прокрутке браузера
Мне нужна помощь в поиске позиции.
im работает над читателем электронной книги, а также всем своим 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.
Ответы
Ответ 1
var note = document.getElementsByName('Note')[0];
var screenPosition = note.getBoundingClientRect();
Клиент, возвращаемый getBoundingClientRect()
, имеет значения для .top
, .left
, .right
, .bottom
, .width
и .height
.
Это позиции пикселей в видимом окне; при прокрутке страницы значения .top
и .bottom
меняются и могут даже стать отрицательными, поскольку элемент прокручивается в верхней части представления.
Обратите внимание, что в отличие от решения, накапливающего offsetLeft
/offsetTop
— это решение правильно учитывает границы и отступы для элементов body
и html
во всех браузерах (Firefox).
Смотрите этот тестовый пример: http://jsfiddle.net/QxYDe/4/ (прокрутите страницу и посмотрите, как изменяются значения).
Также поддерживаемый Internet Explorer.
Ответ 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;
}
}
EDIT:
С несколькими нотами (не проверены):
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;
}
}
Ответ 3
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.
Ответ 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>
Ответ 5
Сначала вам нужно получить высоту всего документа. Высота всего документа с выделенной частью: ссылка
let scrollHeight = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);
После вы можете использовать для получения элемента scrollTop position:
const element = document.getElementsByName('Note');
element.scrollTop
Или вы можете перейти к элементу в представлении (scrollIntoView)
Я не уверен, что вы хотите сделать после получения позиции scrollTop.