1. Розміри елементів і прокрутка веб-сторінки Доброго дня! Продовжуючи тему прокрутка елементів на...
2. Ширина / висота веб-сторінки з урахуванням прокрутки
3. Отримання поточної прокрутки
4. Зміна прокрутки сторінки: scrollTo, scrollBy, scrollIntoView
5. scrollIntoView
6. заборона прокрутки
7. підсумки
8. завдання
9. Заборона пересування між об'єктами

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

Доброго дня! Продовжуючи тему прокрутка елементів на веб-сторінці в цьому уроці ми з вами розглянемо таке питання як прокрутка веб-сторінки і маніпулювання розмірами браузера. Як можна знайти ширину браузера? Як прокрутити веб-сторінку засобами 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).

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

Якщо ви знайшли помилку, будь ласка, виділіть фрагмент тексту і натисніть Ctrl + Enter.

також читайте