使用箭头键导航divs的网格wount滚动溢出的内容

Question

这是我找到的解决方案stackoverflow 这种解决方案适用于我，除了当div的内容溢出时，内容不会滚动旁边的箭头键，如滚动似乎是5个或6行后慢得多。

请这里的上述

var position = { x: 0, y: 0 }; 
var calendarMap = []; 

$(document).ready(function() { 
    $('.row').each(function() { 
     calendarMap.push([]); 
     $('.day, .date', this).each(function() { 
      calendarMap[calendarMap.length - 1].push($(this)); 
     }); 
    }); 
    highlightCell(); 
}); 

$(window).on('keydown', function (e) { 
    if (e.keyCode === 37) // left 
     moveLeft(); 
    else if (e.keyCode === 38) // up 
     moveUp(); 
    else if (e.keyCode === 39) // right 
     moveRight(); 
    else if (e.keyCode === 40) // down 
     moveDown(); 
    highlightCell(); 
}); 

function moveLeft() { 
    position.x--; 
    if (position.x < 0) 
     position.x = 0; 
} 

function moveUp() { 
    position.y--; 
    if (position.y < 0) 
     position.y = 0; 
} 

function moveRight() { 
    position.x++; 
    if (position.x >= calendarMap[0].length) 
     position.x = calendarMap[0].length - 1; 
} 

function moveDown() { 
    position.y++; 
    if (position.y >= calendarMap.length) 
     position.y = calendarMap.length - 1; 
} 

function highlightCell() { 
    $('.day, .date').removeClass('selected'); 
    calendarMap[position.y][position.x].addClass('selected'); 
} 

Answer 1

更新的答案jsFiddle如果我理解这一点，你的问题是，用键盘上的箭头键滚动时，你的“选择角色”压光机内移动速度比实际的滚动条...

这是因为你都移动“选定”对象，并使用你的钥匙滚动。移动压延机内的“选择”对象同时要到正规滚动。所以，两种行为同时是怎么回事，相互独立的，每个箭头键触发。

一个解决办法是增加一个JS行为，以增加额外的滚动箭头密钥使用......但随后如果用户使用他们的鼠标在窗口中滚动，事情会“关闭”了。

你可以看看这篇文章，它可能会帮助： JScrollPane scrolling with arrow keys