Вы должны использовать html.scrollTop вместо body.scrollTop.
Это потому, что элемент HTML становится прокручиваемым. Элемент body с высотой 200% переполняется html с высотой 100%, то есть высотой области просмотра.
Тело здесь не прокручивается, поэтому вы всегда получаете body.scrollTop = 0.
Но HTML делает прокрутку, поэтому вы должны использовать html.scrollTop.
Элементы body и html иногда действуют так, как если бы они были одним элементом. Это случай прокрутки. Но иногда они действуют так, как если бы они были двумя отдельными элементами. Это случаи в стилизации с помощью CSS.
Чтобы перейти от черного к белому (не серому к белому), вам нужно изменить var height = html.scrollHeight - html.clientHeight; и var color = Math.round((html.scrollTop / height) * 255);
Чтобы он работал в IE, вам нужно добавить:
<html onscroll="scroll()">
Если вы можете, вы должны использовать jquery (как предложил Куштрим).
function scroll(){
var body = document.body,
html = document.documentElement;
var height = html.scrollHeight - html.clientHeight;
var color = Math.round((html.scrollTop / height) * 255);
body.style.backgroundColor = "rgb("+color+","+color+","+color+")";
}
html{
height: 100%;
}
body{
height: 200%;
background: rgb(0,0,0);
}
<!DOCTYPE html>
<html lang="en" dir="ltr" onscroll="scroll()">
<body onscroll="scroll()">
<script src="assets/JS/ScrollEffect.js"></script>
</body>
</html>