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

Question

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

Answer 1

我觉得你可以 jQuery API,

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

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

Answer 2

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

Answer 3

已编辑 - 使用临时元素（作为第一个子元素）在可滚动 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))
        })
    }

})

Answer 4

我不确定我是否完全理解你的问题或你试图找到的是什么，因为这两个 应该 有效，但前提是你的目标受众使用 < IE9 我会选择选项 2:

1. window.pageYOffset
2. (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')将return传入任何元素的Y偏移量。

这是一个例子：

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

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

---

1。 window.pageYOffset

整个页面当前滚动的像素数量。您也可以将其视为 "How many pixels do I need to scroll up to get to the top of the page?"

2。 getBoundingClientRect().top

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

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

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

3。 clientTop

The width of the top border of an element in pixels

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