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，则可以适当滚动窗口。

Answer 2

是的，这是可能的。

看看ScrollTo：http://www.w3schools.com/jsref/met_win_scrollto.asp

滚动if元素不在Windows视图中

2 个答案: