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

IT技术 javascript firefox cross-browser
2021-01-25 01:09:36

纯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);
};
3个回答

尝试使用这个：document.documentElement.scrollTop。如果我是正确的document.body.scrollTop，则不推荐使用。

更新

似乎 Chrome 不与答案一起玩，按照@Nikolai Mavrenkov 在评论中的建议安全使用：

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

现在应该涵盖所有浏览器。

我已经确认这也解决了我的问题。
2021-03-17 01:09:36
它不适用于 Chrome。使用更安全window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
2021-03-19 01:09:36
@NikolaiMavrenkov 谢谢，我更新了我的答案。我认为 Chrome 也应该被覆盖，但似乎他们仍然不会遵守其他的 ;)
2021-03-24 01:09:36
真棒。这个解决方案适用于 Firefox，所以我会在加载到 Firefox 时抛出一个 if 条件。谢谢
2021-03-26 01:09:36
@Michelangelo 不在我的网站上工作，不知道为什么。
2021-04-09 01:09:36

除了使用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:)

这正是我一直在寻找的。
2021-03-17 01:09:36
谢谢你的解释！真的帮助别人，包括我自己
2021-03-18 01:09:36
@John_911 这是 StackOverflow 的主要目的；)
2021-04-14 01:09:36

标准是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

我已经在我的代码中插入提到的 polyfill 并替换document.body.scroll*为document.scrollingElement.scroll*
2021-03-18 01:09:36
其它你可能感兴趣的问题
上一篇等待图像在 JavaScript 中加载 下一篇节点请求 - 出现错误“SSL23_GET_SERVER_HELLO：未知协议”