javascript - 如果元素不在窗口 View 中则滚动

Question

我有一个表格，您可以在其中选择一个元素，然后当您按向上或向下箭头键时，将选择下一个或上一个表格行。

为此目的，我创建了以下 jquery:

    $(document).keydown(function(e) {
    var ar=new Array(33,34,35,36,37,39);
    if(selected_row_id != null){
        var key = e.which;
        // up
        if(key == 38){
            $('#'+selected_row_id).prev().trigger('click');
            e.preventDefault();
        }
        //down
        if(key == 40 ){
            $('#'+selected_row_id).next().trigger('click');
            e.preventDefault();
        }

        if($.inArray(key,ar) > -1) {
            e.preventDefault();
            return false;
        }
        return true;
    }
});

这工作正常，但有一个让我恼火的错误。当表格行比您在屏幕上实际看到的位置更靠下时(意味着您必须滚动)，窗口不会自动滚动。

我的问题是，当元素在屏幕上不可见时，如何确保窗口滚动？

Answer 1

这是一个取自 here 的函数:

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
      && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
}

如果元素在窗口中完全可见，则返回 true，否则返回 false。

如果返回false，那么您可以适本地滚动窗口。