Question

我的网页上有3 div个部分，header，content和footer，每个部分都有一个carousel。我需要检查哪一个是完全可见的，以便我可以相应地执行操作。当其中一个完全可见时，我应该在当前完全可见的部分中浏览carousel个图像。我试过这个脚本：

$(document).ready(function () {
  var coverImage = $('.magazine-hero'),
      carousel = $('.carousel'),
      carouselVisible = isElementInViewport(carousel),
      coverEventBinded = false;
      carouselEventBinded = false;

  if (carouselVisible && !carouselEventBinded ) {
    $(document).on('keyup', null, 'right', function(){ $('.next').click(); });
    $(document).on('keyup', null, 'left', function(){ $('.previous').click(); });
    carouselEventBinded = true;
  }

  window.onscroll = function() {
    coverVisible = isElementInViewport(coverImage);
    carouselVisible = isElementInViewport(carousel);

    if (coverVisible && !coverEventBinded ) {
      $(document).on('keyup', null, 'right', forward);
      $(document).on('keyup', null, 'left', back);
      coverEventBinded = true;
    }

    if (carouselVisible && !carouselEventBinded ) {
      $(document).on('keyup', null, 'right', function(){ $('.next').click(); });
      $(document).on('keyup', null, 'left', function(){ $('.previous').click(); });
      carouselEventBinded = true;
    }
  }
});

function isElementInViewport(el) {
  var rect = el[0].getBoundingClientRect();

  return rect.bottom > rect.height &&
        rect.top < (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right > 0 &&
        rect.left < (window.innerWidth || document.documentElement.clientWidth);
}

但这不起作用，因为当我向下滚动并且上部div仍然可见时，我能够导航两个部分的旋转木马。我该如何解决这个问题？

更新

我已经更新了我的脚本，现在我正在尝试查看封面是否可见，然后绑定关键事件以导航封面，如果它不可见，我将取消封面导航的事件，并为旋转木马招募事件：

$(document).ready(function () {
  var coverImage = $('.magazine-hero'),
      headerCarousel = $('.header-carousel'),
      headerCarouselVisible = isElementInViewport(headerCarousel),
      coverEventBinded = false,
      carouselEventBinded = false;

  if (headerCarouselVisible && !carouselEventBinded ) {
    $(document).on('keyup', null, 'right', function(){ $('.next').click(); });
    $(document).on('keyup', null, 'left', function(){ $('.previous').click(); });
    carouselEventBinded = true;
  }

  window.onscroll = function() {
    coverVisible = isElementInViewport(coverImage);
    headerCarouselVisible = isElementInViewport(headerCarousel);

console.log('Cover visible ' + coverVisible);
console.log('Event binded ' + coverEventBinded);

    if (coverVisible && !coverEventBinded) {
      $(document).unbind('keyup', null, 'right', function(){ $('.next').click(); });
      $(document).unbind('keyup', null, 'left', function(){ $('.previous').click(); });
      $(document).on('keyup', null, 'right', forward);
      $(document).on('keyup', null, 'left', back);
      coverEventBinded = true;
      carouselEventBinded = false;
    }
    else {
      $(document).unbind('keyup', null, 'right', forward);
      $(document).unbind('keyup', null, 'left', back);
      $(document).on('keyup', null, 'right', function(){ $('.next').click(); });
      $(document).on('keyup', null, 'left', function(){ $('.previous').click(); });
      carouselEventBinded = true;
      coverEventBinded = false;
    }
  }
});


function isElementInViewport(el) {
  var rect = el[0].getBoundingClientRect();

console.log('Bottom ' + rect.bottom);
console.log('Height ' + rect.height);
console.log('Client height ' + document.documentElement.clientHeight);
console.log('Window height ' + window.innerHeight);

  return rect.bottom > 0 &&
        rect.top < (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right > 0 &&
        rect.left < (window.innerWidth || document.documentElement.clientWidth);
}

我现在遇到的问题是，有时即使底部是负值或小于0，我也会认为coverVisible为真。并且有时候coverEventBinded在它不应该是真的时是真的。我不确定脚本有什么问题，它表现得这样吗？

Javascript - 如果div显示无法正常工作，则滚动

0 个答案: