在不使用 .scrollTop 的情况下查找 JavaScript 滚动顶部属性？答案

【问题标题】：Find JavaScript scroll top property without using .scrollTop?在不使用 .scrollTop 的情况下查找 JavaScript 滚动顶部属性？
【发布时间】：2016-04-21 01:30:01
【问题描述】：

有没有办法在不使用 .scrollTop 的情况下使用 JavaScript 查找滚动顶部属性？

【问题讨论】：

标签： javascript scrolltop

【解决方案1】：

已编辑 - 使用临时元素（作为第一个子元素）测量可滚动 div 中的位置 - 这不应干扰任何样式，因为它仅用于测量时间：

http://codepen.io/themeler/pen/yOjXGp

滚动位置保存在数据属性中。

$(function () {

    function scrollMeasurer($elem) {
        var $measurer     = $('<div/>'),
            initialOffset = 0

        // measuring function
        function measure ($target) {
            var $m = $measurer.clone(),
                position = 0
            // prepend measurer
            $target.prepend($m)
            // calc position
            position = Math.abs($m.position().top - initialOffset)
            // remove measurer
            $m.remove()
            // save scroll position in data-attribute
            $target.attr('data-scrolled-value', position)
            // return position
            return position
        }
        // init (calculate initial offset)
        initialOffset = measure($elem)
        // recount when initial offset is calculated
        measure($elem)

        // bind measure on scroll
        $elem.on('scroll', function (e) {
            measure($(this))
        })
    }

})

【讨论】：

这样就可以找到元素的y位置。我要找scrolltop值
不，它们是两个不同的属性。或者不是？我知道它们是不同的。
两者都将返回从顶部滚动的像素。
所以这有点像。
好点。但是你没有提到你想测量什么。

【解决方案2】：

你可以使用 $("body").offset().top

【讨论】：

我还没有理解你的解决方案。如何使用该代码找到元素的滚动顶部值？
你能具体说明你需要做什么吗？

【解决方案3】：

我不确定我是否完全理解您的问题，或者您想找到什么，因为这两个应该有效，但只有当您的目标受众使用

window.pageYOffset
(document.documentElement || document.body.parentNode || document.body).scrollTop

但是，如果您要查找元素的位置，请继续阅读。

function getOffsetY(elem) {

    var elem = document.body.querySelector(elem);

    return elem.getBoundingClientRect().top + window.pageYOffset - elem.clientTop;

}

然后getOffsetY('#header') 或getOffsetY('.footer') 将返回传入的任何元素的Y 偏移量。

这是一个例子：

var footerOffset = getOffsetY('.footer') + 'px';

现在footerOffset 将为您提供以px 为单位的元素偏移量。

1。 window.pageYOffset

整个页面当前滚动的像素数量。您也可以将其视为“我需要向上滚动多少像素才能到达页面顶部？”

2。 getBoundingClientRect().top

The Element.getBoundingClientRect() method returns ... its position relative to the viewport.

相对于视口是这里的关键。视口是当前可见的网页区域。

getBoundingClientRect().top 将包括边框的大小和以像素为单位的填充。

3。客户端顶部

The width of the top border of an element in pixels

如果您不希望将边框的大小纳入计算，您可以使用clientTop 从我们的结果中减去它，因为它将返回顶部边框的大小。

【讨论】：

你好，这个方法会找到什么类型的值？
@Fisright 将找到传递给 getOffsetY 的元素的 Y 偏移量，并以像素为单位返回。您必须将px 添加到字符串的末尾，才能将其正确用作样式。这是来自 jQuery 的源代码，因此这将使您不必为单个函数加载整个 jQuery 库。
@Fistright 我更新了示例，无论您是要查找当前页面滚动位置还是查找元素的偏移量，一切都应该在那里。让我知道结果如何。
我要找的是滚动顶部：developer.mozilla.org/it/docs/Web/API/Element/scrollTop
是否可以用你写的属性或者有其他方法找到它（不使用.scrolltop属性）

【解决方案4】：

我认为你可以使用这个 jQuery API，

https://api.jquery.com/scrollTop/

$("p:last").text("scrollTop:" + p.scrollTop());

【讨论】：

不，不使用 .scrolltop