Эффект прокрутки не работает на Chrome

Question

У меня есть эффект прокрутки, который меняет цвет фона, находя положение пользователя на странице и используя его для установки цвета.Это отлично работает в сафари и в Atom Html Previewer, однако, когда я проверял его в chrome, он не работал.Мой веб-сайт harry-day.con

Есть предложения о том, почему это не работает или как это исправить?Я попытался немного изменить JS, но ничего не получилось.

Вот JavaScript, который я использую:

function scroll(){
    var body = document.body,
    html = document.documentElement;
    var height = html.scrollHeight - html.clientHeight;
    var color = Math.round((body.scrollTop / height) * 255);
    body.style.backgroundColor = "rgb("+color+","+color+","+color+")";
}

Редактировать: я пытался использовать var color = Math.round((html.scrollTop / height) * 255);, однако теперь он не работает, когда я тестировалэто локально в Safari.

Answer 1

Вы можете проверить this для кросс-браузерного способа получения текущей позиции прокрутки:

var doc = document.documentElement;
var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);

function scroll(){
    var body = document.body;
    var doc = document.documentElement;
    var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);
    var height = doc.scrollHeight - doc.clientHeight;
    var color = Math.round((top / height) * 255);
    body.style.backgroundColor = "rgb("+color+","+color+","+color+")";
}

window.addEventListener('scroll', scroll);

body {
  height: 1400px;
}