Question

我正在使用一些js：

在http://www.imbeeld.nl网站上工作

$(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（脚本中的'person'）。但是当通过网站手动滚动时，personPosition不会被更改。因此，滚动后单击箭头将导航到箭头访问的最后一张幻灯片后的下一张幻灯片。

如何在使用箭头导航时包含滚动位置？

Answer 1

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

受this answer启发的代码

js - scrollToEl获取滚动位置

1 个答案: