Размеры элементов и прокрутка веб-страницы

Размеры элементов и прокрутка веб-страницы

Здравствуйте! В продолжении темы прокрутка элементов на веб-странице в этом уроке мы с вами  рассмотрим такой вопрос как прокрутка веб-страницы и манипулирование  размерами браузера.   Как можно найти ширину браузера? Как прокрутить веб-страницу средствами JavaScript ? Ответы на эти вопросы я думаю  вы найдете в этом уроке.

Прокрутка элементов на веб-странице

Ширина/высота видимой части окна браузера

Свойства clientWidth/Height для элемента  – это как раз  и есть ширина/высота видимой области окна.
Прокрутка элементов на веб-странице
Не window.innerWidth/Height

Надо отметить, что все браузеры, кроме IE8-,  могут также поддерживать свойства window.innerWidth/innerHeight. Они сохраняют текущий размер окна.

В чём же отличие?  Спросите вы. Оно конечно небольшое, но черезвычайно важное.

Свойства clientWidth/Height, если есть полоса прокрутки, возвратят именно ширину/высоту внутри неё, доступную для  всего документа, а window.innerWidth/Height –  будут игнорировать её наличие.

Если правую часть страницы занимает полоса прокрутки, то  вот эти строки выведут разное:

alert( window.innerWidth ); // вся полная ширина окна
alert( document.documentElement.clientWidth ); // ширина за вычетом прокрутки

Обычно нас интересует только доступная ширина окна,  для примера, чтобы нарисовать что-то, то есть за вычетом полосы прокрутки. Поэтому зачастую используется documentElement.clientWidth.

Ширина/высота веб-страницы с учётом прокрутки

Да теоретически, видимая часть страницы – это documentElement.clientWidth/Height, а  вот полный размер с учётом полосы  прокрутки – по аналогии, documentElement.scrollWidth/scrollHeight.

Это верно для  всех обычных элементов.

А вот для страницы с этими свойствами  может возникнуть проблема, когда прокрутка то есть, то ее нет. В этом случае они работают некорректно. Надо сказать, что в браузерах Chrome/Safari и Opera при отсутствии  полосы прокрутки значение documentElement.scrollHeight в этом случае может быть даже меньше, чем documentElement.clientHeight, что, конечно же, выглядит как нечто не логичное

Читайте также  Координаты элементов в документе

Эта проблема может возникать именно для documentElement.

А вот надёжно определить размер страницы с учетом прокрутки можно, просто взяв максимум из этих нескольких свойств:

var scrollVisota = Math.max(
  document.body.scrollVisota, document.documentElement.scrollHeight,
  document.body.offsetVisota, document.documentElement.offsetHeight,
  document.body.clientVisota, document.documentElement.clientHeight
);
alert( 'Высота с учетом прокрутки: ' + scrollVisota );

Получение текущей прокрутки

Если у  обычного элемента текущую прокрутку можно получить в scrollLeft/scrollTop.

То , что же со страницей?

Дело в том, что большинство браузеров корректно обработает запрос к documentElement.scrollLeft/Top, однако Safari/Chrome/Opera есть ошибки, из-за которых  вам следует использовать document.body.

Ну а, чтобы вообще обойти  эту проблему,  вы можете использовать свойства window.pageXOffset/pageYOffset:

alert( 'Текущая прокрутка сверху: ' + window.pageYOffset );
alert( 'Текущая прокрутка слева: ' + window.pageXOffset );

Эти все свойства:

  • Не поддерживаются IE8-
  • Их можно только читать, а менять нельзя.

Если IE8- не волнует, то просто используем эти свойства.

Кросс-браузерный вариант с учётом IE8 предусматривает вариант на documentElement:

var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
alert( "Текущая прокрутка: " + scrollTop );

Изменение прокрутки страницы: scrollTo, scrollBy, scrollIntoView

Для того, чтобы прокрутить страницу при помощи JavaScript, её все элементы  должны  быть полностью загружены.

На обычных элементах  scrollTop/scrollLeft  в принципе можно изменять, и при этом элемент будет прокручиваться.

Никто  вам не мешает точно так же поступать и со страницей. Во всех браузерах, кроме Chrome/Safari/Opera можно осуществить прокрутку  простой установкой document.documentElement.scrollTop, а в указанных –  следует использовать для этого document.body.scrollTop. И  все будет отлично  работать.

Но есть и другое, универсальное решение – специальные методы прокрутки страницы window.scrollBy(x,y) и window.scrollTo(pageX,pageY).

  • Метод scrollBy(x,y)  будет прокручивает страницу относительно  ее текущих координат.
  • Метод scrollTo(pageX,pageY) прокручивает страницу к указанным координатам относительно всего  документа. Он будет  эквивалентен установке свойств scrollLeft/scrollTop. Чтобы прокрутить в начало документа,  вам достаточно указать координаты (0,0).
Читайте также  Объект document. Как найти элемент на странице

scrollIntoView

Метод elem.scrollIntoView(top) должен вызываться  на элементе и прокручивает страницу таким образом, чтобы элемент оказался вверху, если же  параметр top равен true, и внизу, если top соответственно равен false. Причем, если  данный параметр top не указан, то он будет равным true.

Запрет прокрутки

Бывают ситуации когда  бывает нужно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – таким образом, чтобы посетитель мог прокручивать это окно, но не  сам документ.

Для того, чтобы  запретить прокрутку страницы, достаточно поставить свойство  document.body.style.overflow = «hidden».

Вместо document.body может быть любой элемент, прокрутку которого необходимо запретить.

Но вот недостатком этого способа является то, что  собственно сама полоса прокрутки исчезает. Если она занимала некоторую ширину, то теперь  оответственно эта ширина освободится, и содержимое страницы  будет расширено, текст «прыгнет», заняв все освободившееся место.

Итоги

Размеры:

  • Для получения размеров видимой части окна используется свойство: document.documentElement.clientWidth/Height
  • Для получения размеров страницы с учётом прокрутки следует использовать:
    var scrollHeight = Math.max(
      document.body.scrollHeight, document.documentElement.scrollHeight,
      document.body.offsetHeight, document.documentElement.offsetHeight,
      document.body.clientHeight, document.documentElement.clientHeight
    );

Прокрутка окна:

  • Прокрутку окна вы можете получить как window.pageYOffset (для горизонтальной – window.pageXOffset) везде, кроме браузера  IE8-. На всякий случай – вот вам  самый кросс-браузерный способ, учитывающий, также и IE7- в том числе:
    var html = document.documentElement;
    var body = document.body;
    
    var scrollTop = html.scrollTop || body && body.scrollTop || 0;
    scrollTop -= html.clientTop; // в IE7- <html> смещён относительно (0,0)
    
    alert( "Текущая прокрутка: " + scrollTop );
  • Установить прокрутку  вы можете  при помощи следующих  специальных методов:
    • window.scrollTo(pageX,pageY) – абсолютные координаты,
    • window.scrollBy(x,y) – прокрутить относительно от текущего места.
    • elem.scrollIntoView(top) – прокрутить, чтобы элемент elem стал виден.

Задачи

Прокрутка страницы

Реализуйте прокрутку страницы вниз, если пользователь нажал на определенный элемент.

Читайте также  Как поменять стиль элемента через JavaScript

Запрет прокрутки страницы

При клике на большое диалоговое окно запретите прокручивать остальную часть страницы.
Урок по прокрутке страницы на JavaScript

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: