在不使用 .scrollTop 的情况下查找 JavaScript 滚动顶部属性? [英] Find JavaScript scroll top property without using .scrollTop?

问题描述

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

解决方案

EDITED - 使用临时元素(作为第一个子元素)测量可滚动 div 中的位置 - 这不应干扰任何样式，因为它仅用于测量时间:

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

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

$(function () {函数 scrollMeasurer($elem) {var $measurer = $('
'),初始偏移量 = 0//测量函数功能测量($目标){var $m = $measurer.clone(),位置 = 0//前置测量器$target.prepend($m)//计算位置位置 = Math.abs($m.position().top - initialOffset)//移除测量器$m.remove()//在 data-attribute 中保存滚动位置$target.attr('数据滚动值'，位置)//返回位置返回位置}//init(计算初始偏移量)初始偏移量 = 测量($elem)//计算初始偏移量时重新计数措施($elem)//在滚动时绑定度量$elem.on('scroll', function (e) {措施($(这个))})}})

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

解决方案

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 () {

    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))
        })
    }

})

这篇关于在不使用 .scrollTop 的情况下查找 JavaScript 滚动顶部属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！