document.body.scrollTop Firefox返回0：只有JS

Question

純javascript中的任何替代品？

以下適用於歌劇，鉻和野生動物園。 尚未在資源管理器上測試過：

http://monkey-me.herokuapp.com

https://github.com/coolcatDev/monkey-me-heroku/blob/master/static/js/myscripts.js

在頁面加載時應向下滾動到div'.content'：

var destiny = document.getElementsByClassName('content');
var destinyY = destiny[0].offsetTop;
scrollTo(document.body, destinyY, 200);

function scrollTo(element, to, duration) {
    if (duration <= 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 2;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        scrollTo(element, to, duration - 2);
    }, 10);
};

Answer 1

嘗試使用： document.documentElement.scrollTop 。 如果我是正確的document.body.scrollTop已棄用。

更新

似乎Chrome不能與答案一起使用，按照@Nikolai Mavrenkov在評論中的建議安全使用：

window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0

現在應該涵蓋所有瀏覽器。

Answer 2

而不是使用IF條件，通過使用類似邏輯表達式的東西，更容易獲得正確的結果。

var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;

這兩個部分默認返回零，因此當您的滾動位於零位置時，這將按預期返回零。

bodyScrollTop = 0 || 0 = 0

在頁面滾動中，其中一個部分將返回零，另一個將返回一個大於零的數字。 歸零值的計算結果為false，然后是邏輯OR || 將得到另一個值（例如，您的預期scrollTop為300 ）。

類似Firefox的瀏覽器會將此表達式視為

bodyScrollTop = 300 || 0 = 300

和其他瀏覽器看到

bodyScrollTop = 0 || 300 = 300

這再次給出了相同和正確的結果。

事實上，這完全是關於something || nothing = something something || nothing = something :)

Answer 3

標准是document.documentElement ，FF和IE使用它。

WebKit使用document.body並且由於關於向后兼容性的投訴如果他們改為標准而無法使用該標准，這篇文章很好地解釋了它

https://miketaylr.com/posts/2014/11/document-body-scrolltop.html

WebKit現在支持的文檔上有一個新屬性

https://developer.mozilla.org/en/docs/Web/API/document/scrollingElement

所以這將使你找到正確的元素

var scrollingElement = document.scrollingElement || document.documentElement;
scrollingElement.scrollTop = 100;

並且還有一個polyfill

https://github.com/mathiasbynens/document.scrollingElement