我在一个网站上工作http://www.imbeeld.nl带有一些js:
$(document).ready(function() {
var personPosition = 0;
function scrollToEl(el) {
$('html, body, *').animate({scrollLeft: $(el).offset().left}, 1000);
}
$('#wrapper_h1').on('click', 'div.body_arrowr', function(e) {
e.preventDefault();
var nextPerson = $('#wrapper_h1 div.body').get(personPosition + 1);
personPosition += 1;
scrollToEl(nextPerson);
});
$('#wrapper_h1').on('click', 'div.body_arrowl', function(e) {
e.preventDefault();
var previousPerson = $('#wrapper_h1 div.body').get(personPosition - 1);
personPosition -= 1;
scrollToEl(previousPerson);
});
$('.button, .menu_button, #back').on('click', function() {
scrollToEl('#' + $(this).data('target'));
});
});
左右两个箭头导航到上一个和下一个div.body（脚本中的"人"）。但当手动滚动浏览网站时，personPosition不会更改。因此，滚动后单击箭头将导航到箭头访问的最后一张幻灯片之后的下一张幻灯片。
使用箭头导航时，如何包含滚动位置？
$(document).keydown(function(e) {
switch(e.which) {
case 37: // left
var nextPerson = $('#wrapper_h1 div.body').get(personPosition + 1);
personPosition += 1;
scrollToEl(nextPerson);
break;
case 39: // right
var previousPerson = $('#wrapper_h1 div.body').get(personPosition - 1);
personPosition -= 1;
scrollToEl(previousPerson);
break;
default: return; // exit this handler for other keys
}
e.preventDefault(); // prevent the default action (scroll / move caret)
});
受此答案启发的代码