Прескочи към основното съдържание Прескочи към навигацията
Допълнения към урока
Учебна програма Основи на програмирането с JavaScript
Основи на програмирането с JavaScript
7. Работа с DOM

Още за Offset и Scroll

Курсове Основи на програмирането с JavaScript Седмица 7 - Работа с DOM

Пълен достъп до курса: Не

За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.

Предишен Следващ

Основи на програмирането с JavaScript В курса ще се научите как да пишете код с помощта на един от най-популярните програмни езици - JavaScript. Този курс е идеален за напълно начинаещи и ще ви помогне да разберете основите на програмирането, както и как да създавате интерактивни уеб приложения. Ще придобиете фундаментални умения, които ще ви позволят да създавате динамични уеб сайтове и да поставите основите си за развитие в областта на софтуерното програмиране.

Кога да използваме Offset и кога Scroll

Offset измерва реалните размери и позицията на елемент спрямо неговия родител, а Scroll показва размера на цялото съдържание и текущото скролиране. Ако страницата е най-горе, offsetTop и scrollTop може да изглеждат еднакви, но при скролиране scrollTop се променя, а offsetTop остава същият. Най-важното: Offset стойностите са само за четене, докато scrollTop и scrollLeft могат да се задават програмно.

Практически пример стъпка по стъпка

  1. Проверете стойностите на offsetHeight и scrollHeight на document.body – първоначално те съвпадат, защото body се оразмерява според съдържанието.
  2. Задайте в CSS на html и body височина 100%, за да ги ограничите до размера на viewport.
  3. Наблюдавайте как offsetHeight се променя според прозореца, но scrollHeight остава равен на реалната височина на съдържанието.
  4. Скролирайте страницата и проверете scrollTop – стойността се увеличава според изминатите пиксели.
  5. Задайте програмно document.body.scrollTop = 50 и вижте как страницата се скролира автоматично.

Основни свойства

  • offsetHeight – видимата височина на елемента спрямо неговия контейнер
  • offsetTop – отстояние от горния ръб на родителя
  • scrollHeight – пълната височина на съдържанието, включително скритата част
  • scrollTop – колко пиксела е скролиран елементът вертикално (може да се задава)
  • scrollLeft – хоризонтална позиция на скрола (може да се задава)

Дискусия към урока