Найти позицию элемента в прокрутке браузера

Мне нужна помощь в поиске позиции. 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.