Перемещение ползунка прокрутки вверх или вниз

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