Question

我的移动网络应用程序的一个功能是将用户滚动到页面上的特定点。以下代码可以实现此目的，但它仅适用于iPhone Safari。在Chrome浏览器/ Android上，它会滚动到页面底部。为什么不一致？

请注意：我不想使用jQuery。

var $ = function(elID) {
    return document.getElementById(el); 
}

// Get info about target element's position and dimensions
var getRect = function(el) {
    return el.getBoundingClientRect(); 
}

var scrollJump = function(){
    var page = $('dPageContainer');
    headerHeight = getRect($('dFixedHeader')).height; 

    return function(el){
        // If a jQuery object, convert to raw DOM el
        if ('get' in el) {
            el = el.get(0); 
        }

        var rect = getRect(el); 

        // Scroll the page to the element's position
        page.scrollTop+= rect.top - rect.height - headerHeight;  
    }
};

var scrollToEl = scrollJump();

scrollToEl( $('my_DIV_ID') );

Answer 1

我能够通过简化和清理代码来解决这个问题。特别是，我使用了offsetTop方法，而不仅仅依赖于getBoundingClientRect：

var $ = function(el) {
    return document.getElementById(el); 
}

var scrollJump = function(){
    var page = $('dPageContainer'),
    headerHeight = $('dFixedHeader').getBoundingClientRect().height; 

    return function(el){
        // If a jQuery object, convert to raw DOM el
        if ('get' in el) el = el.get(0); 

        // Scroll the page to the element's position
        page.scrollTop = el.offsetTop - headerHeight; 
    }
};

var scrollToEl = scrollJump(); 
scrollToEl( $('my_DIV_ID') );

移动Chrome和Safari之间的页面滚动不一致

1 个答案: