移动滚动条向上或向下

Question

正如我所经历的ExtJS的例子我碰到这种行为http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/array-grid.html

当你点击一个行，当你开始移动光标向上或向下，沿滚动条的移动和当你到达最后一个记录时，滚动条就会和你在一起。

这个例子是使用一些键盘事件，但在我的例子中，我只是试图突出显示行，并希望我会明白这是如何做到的。

这是我的例子http://jsfiddle.net/thiswolf/phEax/

这就是我得到了我的滚动条

.tableholder{border:2px solid red; overflow-y:auto;height:300px} 

是什么使得滚动条，你上移或下移行待着？

Answer 1

Checkout this fiddle。它使用下面的代码，除了你的代码来模仿表控制的一个非常基本的版本，你的目标为

 var cntnr = $('.tableholder'); 
     var cntnr_height = cntnr.height(); 
     var cntnr_top = cntnr.offset().top; 
     var cntnr_scrolltop = cntnr.scrollTop(); 
     var all_rows = $('tr', cntnr) 
     var row_height = $(all_rows.get(0)).height(); 

     $('.tableholder').click(function (ev) { 
      var t = ev.target; 
      if (t.tagName != 'TD' && t.tagName != 'TR') 
       return; 

      var the_row = t.tagName == 'TR' ? $(t) : $(t.parentNode) 
      all_rows.removeClass('current') 
      the_row.addClass('current'); 
     }) 

     $('#deselect').click(function() { 
      all_rows.removeClass('current'); 
     }) 

     $(document).click(function (ev) { 
      /*if ($(ev.target) != cntnr && $(ev.target).parents().filter(cntnr).length == 0 && $(ev.target).hasClass('container')) 
      all_rows.removeClass('current');*/ 
     }).keydown(function (ev) { 

       //don't scroll if no rows are selected 
       if (all_rows.filter('.current').length == 0) { 
       return; 
       } 

       var keycode = ev.which; 

       if ([38, 40].indexOf(keycode) !== -1) { 
       ev.preventDefault(); 
       } 
       else { 
       //we only scroll on up/down arrow 
       return; 
       } 

       var the_row = all_rows.filter('.current'); 
       var next = the_row.next(); 
       var prev = the_row.prev(); 

       //check if reached extremes of table 
       if (
       keycode == 40 && !next.length 
        || keycode == 38 && !prev.length 
       ) 
       return false; 

       the_row.removeClass('current'); 

       if (keycode == 40) { 
       if (next.offset().top + row_height + 10 - cntnr_top > cntnr_height + cntnr.scrollTop()) { 
        cntnr.scrollTop(cntnr.scrollTop() + row_height); 
       } 
       next.addClass('current'); 
       setDataFromRow(next) 
       } 
       else { 
       if (prev.offset().top < cntnr.scrollTop()) { 
        cntnr.scrollTop(cntnr.scrollTop() - row_height); 
       } 
       prev.addClass('current'); 
       setDataFromRow(prev) 
       } 
      }); 

     function setDataFromRow(row) { 
      if (!row instanceof jQuery) 
       row = $(row) 

      ip_id.val($('td:nth-child(1)', row).html()); 
      ip_firstname.val($('td:nth-child(2)', row).html()); 
      ip_lastname.val($('td:nth-child(3)', row).html()); 
      ip_country.val($('td:nth-child(4)', row).html()); 
      ip_city.val($('td:nth-child(5)', row).html()); 
      ip_town.val($('td:nth-child(6)', row).html()); 
      ip_gender.val($('td:nth-child(7)', row).html()); 

     } 

     var curr = $("tr").eq(1); 
     curr.addClass("current"); 

     /*$('#id').val('0'); 
     $('#firstname').val('firstname'); 
     $('#lastname').val('lastname'); 
     $('#country').val('country'); 
     $('#city').val('city'); 
     $('#town').val('town'); 
     $('#gender').val('gender');*/ 

     var ip_id = $('#id'), 
      ip_firstname = $('#firstname'), 
      ip_lastname = $('#lastname'), 
      ip_country = $('#country'), 
      ip_city = $('#city'), 
      ip_town = $('#town'), 
      ip_gender = $('#gender'); 


     setDataFromRow(curr); 

     /* your event handlers for buttons here */ 

请注意，此代码可能不是在各方面的完美。我没有触及你的事件处理代码，在某些地方出错：D我希望你从这个代码得到一个起点和方向

Answer 2

看看这个http://jsfiddle.net/Memolition/DcaG4/

$('table tr').click(function() { 
    var now_index = $(this).index(); 
    $('table tr').removeClass('back_change'); 
    $(this).addClass('back_change'); 
}); 
$(document).keydown(function(event){ 
    var keycode=(event.keyCode?event.keyCode:event.which); 
    if(keycode == '40') { 
     event.preventDefault(); 
     $('table tr.back_change').removeClass('back_change').next().addClass('back_change'); 
     $('div').animate({ 
     scrollTop: $('table tr.back_change').offset().top 
    }, 2000); 
    } 
}); 
$(document).keydown(function(event){ 
    var keycode=(event.keyCode?event.keyCode:event.which); 
    if(keycode == '38') { 
     event.preventDefault(); 
     $('table tr.back_change').removeClass('back_change').prev().addClass('back_change'); 
     $('div').animate({ 
     scrollTop: $('table tr.back_change').offset().top 
    }, 100); 
    } 
});