横向上的css过渡使用jQuery检测的垂直滚动

Question

我找到了一个很好的脚本来添加和删除课程＆＃34; .in-view＆＃34;到垂直滚动的元素。它工作正常，但我需要让它适用于水平和垂直滚动。这是原始脚本，适用于垂直滚动：

var $animation_elements = jQuery('.animation-element');
var $window = jQuery(window);

function check_if_in_view() {
  var window_height = $window.height();
  var window_top_position = $window.scrollTop();
  var window_bottom_position = (window_top_position + window_height);


  jQuery.each($animation_elements, function() {
    var $element = jQuery(this);
    var element_height = $element.outerHeight();
    var element_top_position = $element.offset().top;
    var element_bottom_position = (element_top_position + element_height);

    //check to see if this current container is within viewport
    if ((element_bottom_position >= window_top_position) &&
      (element_top_position <= window_bottom_position)) {
      $element.addClass('in-view');
    } else {
      $element.removeClass('in-view');
    }
  });
}

$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');

这就是我试图让它横向工作的原因，但不幸的是它没有工作：

var $animation_elements = jQuery('.animation-element');
var $window = jQuery(window);

function check_if_in_view() {
  var window_height = $window.height();
  var window_top_position = $window.scrollTop();
  var window_bottom_position = (window_top_position + window_height);

  var window_width = $window.width();
  var window_left_position = $window.scrollLeft();
  var window_right_position = (window_left_position + window_width);

  jQuery.each($animation_elements, function() {
    var $element = jQuery(this);
    var element_height = $element.outerHeight();
    var element_top_position = $element.offset().top;
    var element_bottom_position = (element_top_position + element_height);

    var element_width = $element.outerWidth();
    var element_left_position = $element.offset().left;
    var element_right_position = (element_left_position + element_width);

    //check to see if this current container is within viewport
    if ((element_bottom_position >= window_top_position) &&
      (element_top_position <= window_bottom_position)) {
      $element.addClass('in-view');
    } else if ((element_right_position >= window_left_position) &&
      (element_left_position <= window_right_position)) {
      $element.addClass('in-view');
    } else {
      $element.removeClass('in-view');
    }
  });
}

$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');