Find Javascript Scroll Top Property Without Using .scrolltop?

Is There a way to find scroll top property with JavaScript without using .scrollTop?

Solution 1:

EDITED - measuring position in scrollable div using temporary element (as first-child) - this should not interfere with any styles as it is used only for measurement time:

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

Scroll position is saved in data attribute.

$(function () {

    functionscrollMeasurer($elem) {
        var$measurer     = $('<div/>'),
            initialOffset = 0// measuring functionfunctionmeasure ($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 positionreturn 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))
        })
    }

})

Solution 2:

You can use $("body").offset().top

Solution 3:

I'm not sure if I fully understand your question or what it is that you are trying to find as these two should work, but only if your target audience uses < IE9 would I go for option 2:

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

However, if you are trying to find the position of an element, read on.

---

functiongetOffsetY(elem) {

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

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

}

Then getOffsetY('#header') or getOffsetY('.footer') will return the Y offset of any element passed in.

Here's an example:

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

Now footerOffset will give you the element's offset in px units.

---

1. window.pageYOffset

The amount of pixels the entire page currently has scrolled. You can also think of this as "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.

Relative to the viewport is key here. The viewport is the area of the web page that is currently visible.

getBoundingClientRect().top will include the size of the border and padding in pixels.

3. clientTop

The width of the top border of an element in pixels

If you wish to not take the size of the border into the calculation, you can subtract this from our result by using clientTop, as it will return the size of the top border.

Solution 4:

I thik you can this jQuery API,

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

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