Question

我有一个滚动效果，通过查找页面上的用户位置并使用它来设置颜色来更改背景的颜色。这在safari和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);

＆＃13;

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);

＆＃13;

body {
  height: 1400px;
}

＆＃13;

滚动效果不适用于chrome

1 个答案: