2015-03-02 92 views
0

我工作的一个网站上http://www.imbeeld.nl一些JS:JS - scrollToEl获取滚动位置

$(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不会被更改。因此,滚动后单击箭头将导航到最后一个箭头访问的下一张幻灯片。

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

回答

0
$(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

启发