zzloy
@zzloy
Дизайнер

Как определить высоту браузера по body и html?

Добрый день!

Запилил на сайт смену цвета фона при определенном проценте скролла по высоте. Код:
function scrollfunction() {
			var body = document.body;
			if(body.scrollTop / body.scrollHeight < 0.07) {
				body.className = "white";
			} else {
			if(body.scrollTop / body.scrollHeight < 0.20) {
				body.className = "red";
			} else {
			if(body.scrollTop / body.scrollHeight < 0.30) {
				body.className = "violet";
			} else {
			if(body.scrollTop / body.scrollHeight < 0.45) {
				body.className = "blue";
			} else {
			if(body.scrollTop / body.scrollHeight < 0.60) {
				body.className = "green";
			} else {
			if(body.scrollTop / body.scrollHeight < 0.75) {
				body.className = "orange";
			} else {
			if(body.scrollTop / body.scrollHeight < 0.96) {
				body.className = "asphalt";
			} }}}}}}
		}


Проблема:
Смена цвета работает только в Chrome и Safari. Гуглингом обнаружил, что эти браузеры высчитывают высоту окна по тегу body, остальные по html. Постарался сделать аналогично с html, добавляя такие же условия для html, но это не помогло. С условиями для body и html сразу — не работает. Более того, с условием только для html — тоже не работает.

Сам веб-дизайнер и верстальщик, в js разбираюсь плохо, но кое-как написал.
В чем ошибка? Буду очень благодарен!
  • Вопрос задан
  • 3288 просмотров
Решения вопроса 1
Lobotomist
@Lobotomist
Software Developer
Тут написано. Добавить особо то и нечего =)

И я бы немного изменил код:
1. Не стоит высчитывать долю в каждой проверке, лучше сохранить ее в переменной и ею уже оперировать.
2. Будет более читабельно, если использовать else if

/**
 * Определяет позицию скролла по отношению к высоте полоски скролла.
 * @return {Number} 
 */
function getScrollPosition() {
	var scrollHeight = document.documentElement.scrollHeight;
	var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

	return Math.round(scrollTop/scrollHeight);
};

function scrollfunction() {
	var body = document.body;
	var scrollPosition = getScrollPosition();

	if (scrollPosition < 0.07) {
		body.className = "white";
	} else if (scrollPosition < 0.20) {
		body.className = "red";
	} else if (scrollPosition < 0.30) {
		body.className = "violet";
	} else if (scrollPosition < 0.45) {
		body.className = "blue";
	} else if (scrollPosition < 0.60) {
		body.className = "green";
	} else if (scrollPosition < 0.75) {
		body.className = "orange";
	} else if (scrollPosition < 0.96) {
		body.className = "asphalt";
	};
};
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
bahek2462774
@bahek2462774
в современных браузерах вьюпорт можно померить window.innerHeight.

а вообще может ето пригодится

document.documentElement.[scrollHeight,clientHeight,offsetHeight]
document.body.[scrollHeight,clientHeight,offsetHeight]
window.[inner,outer][Height,Width]
Ответ написан
@Sayonji
По крайней мере в Firefox есть свойста window.scrollY и window.scrollMaxY.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
15 авг. 2020, в 01:45
95000 руб./за проект
14 авг. 2020, в 22:47
15000 руб./за проект
14 авг. 2020, в 22:40
15000 руб./за проект