Книга: JavaScript. Подробное руководство, 6-е издание

15.8.4. Прокрутка

15.8.4. Прокрутка

В примере 15.8 демонстрировалось, как определять позиции полос прокрутки окна броузера. Чтобы заставить броузер прокрутить документ, можно присваивать значение используемым в этом примере свойствам scrollLeft и scrollTop, но существует более простой путь, поддерживаемый с самых ранних дней развития языка JavaScript. Метод scrollTo() объекта Window (и его синоним scroll()) принимает координаты X и Y точки (относительно начала координат документа) и устанавливает их в качестве величин смещения полос прокрутки. То есть он прокручивает окно так, что точка с указанными координатами оказывается в верхнем левом углу видимой области. Если указать точку, расположенную слишком близко к нижней или к правой границе документа, броузер попытается поместить эту точку как можно ближе к верхнему левому углу видимой области, но не сможет обеспечить точное их совпадение. Следующий пример прокручивает окно броузера так, что видимой оказывается самая нижняя часть документа:

// Получить высоту документа и видимой области. Метод offsetHeight описывается ниже.
var documentHeight = document.documentElement.offsetHeight;
var viewportHeight = window.innerHeight; // Или использовать getViewportSize(),
                                         // описанный выше
// И прокрутить окно так, чтобы переместить последнюю "страницу" в видимую область
window.scrollTo(0, documentHeight - viewportHeight);

Метод scrollBy() объекта Window похож на методы scroll() и scrollTo(), но их аргументы определяют относительное смещение и добавляются к текущим позициям полос прокрутки. Тем, кто умеет быстро читать, мог бы понравиться следующий букмарклет (раздел 13.2.5.1):

// Прокручивает документ на 10 пикселов каждые 200 мсек.
// Учтите, что этот букмарклет нельзя отключить после запуска!
JavaScript:void setInterval(function() {scrollBy(0,10)}, 200);

Часто требуется прокрутить документ не до определенных числовых координат, а до элемента в документе, который нужно сделать его видимым. В этом случае можно определить координаты элемента с помощью метода getBoundingClientRect(), преобразовать их в координаты относительно начала документа и передать их методу scrollTo(), но гораздо проще воспользоваться методом scrollIntoView() требуемого HTML-элемента. Этот метод гарантирует, что элемент, относительно которого он будет вызван, окажется в видимой области. По умолчанию он старается прокрутить документ так, чтобы верхняя граница элемента оказалась как можно ближе к верхней границе видимой области. Если в единственном аргументе передать методу значение false, он попытается прокрутить документ так, чтобы нижняя граница элемента совпала с нижней границей видимой области. Кроме того, броузер выполнит прокрутку по горизонтали, если это потребуется, чтобы сделать элемент видимым.

Своим поведением метод scrollIntoView() напоминает свойство window.location.hash, когда ему присваивается имя якорного элемента (элемента <а name= >).

Оглавление книги