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

Question

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

Answer 1

EDITED - 使用临时元素（作为第一个子元素）测量可滚动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 2

你可以使用$（＆＃34; body＆＃34;）。offset（）。top

Answer 3

我不确定我是否完全理解您的问题，或者您试图找到的是什么，因为这两个应有效，但前提是您的目标受众使用＆lt; 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')将返回传入的任何元素的Y偏移量。

以下是一个例子：

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

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



1。 window.pageYOffset

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

2。 getBoundingClientRect（）。顶部

  

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

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

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

3。 clientTop

  

The width of the top border of an element in pixels

如果您不想将边框的大小计入计算中，可以使用clientTop从结果中减去此值，因为它会返回顶部边框的大小。

Answer 4

我知道你可以使用这个jQuery API，

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

$（“p：last”）。text（“scrollTop：”+ p.scrollTop（））;