Javascript-如果div可见且工作不正常，则滚动显示

我的页面上有

3个div

部分，

页眉

，

内容

和

页脚

，每个部分都有一个

旋转木马

。我需要以某种方式检查其中哪一个是完全可见的，以便我可以相应地执行操作。当其中一个完全可见时，我应该在当前完全可见的部分中启用通过

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

$（文档）.ready（函数（）{
变量coverImage=$（“.magazine hero”），
旋转木马=$（'.carousel'），
carouselVisible=isElementInViewport（carousel），
coverEventBinded=false；
carouselEventBinded=false；
if（carouselVisible&！carouselventbinded）{
$（document）.on（'keyup'，null，'right'，function（）{$（'.next'）。单击（）；}）；
$（document）.on（'keyup'，null，'left'，function（）{$（'.previous'）。单击（）；}）；
carouselEventBinded=true；
}
window.onscroll=函数（）{
coverVisible=IsElementViewPort（coverImage）；
carouselVisible=iselementviewport（carousel）；
如果（coverVisible&！CoverEventBind）{
$（文档）.on（'keyup'，null，'right'，forward）；
$（文档）.on（'keyup'，null，'left'，back）；
covereventbind=true；
}
if（carouselVisible&！carouselventbinded）{
$（document）.on（'keyup'，null，'right'，function（）{$（'.next'）。单击（）；}）；
$（document）.on（'keyup'，null，'left'，function（）{$（'.previous'）。单击（）；}）；
carouselEventBinded=true；
}
}
});
函数IsElementViewPort（el）{
var rect=el[0]。getBoundingClientRect（）；
返回rect.bottom>rect.height&&
rect.top<（window.innerHeight | | document.documentElement.clientHeight）&&
右矩形>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);
}

$（文档）.ready（函数（）{
变量coverImage=$（“.magazine hero”），
headerCarousel=$（'.header carousel'），
HeaderCarouseVisible=isElementInViewport（headerCarousel），
CoverEventBind=false，
carouselEventBinded=false；
if（标题CAURESELVISIBLE&！旋转木马绑定）{
$（document）.on（'keyup'，null，'right'，function（）{$（'.next'）。单击（）；}）；
$（document）.on（'keyup'，null，'left'，function（）{$（'.previous'）。单击（）；}）；
carouselEventBinded=true；
}
window.onscroll=函数（）{
coverVisible=IsElementViewPort（coverImage）；
HeaderCarouseVisible=isElementInViewport（headerCarousel）；
console.log（'Cover-visible'+Cover-visible）；
console.log（'Event bind'+covereventbind）；
如果（coverVisible&！CoverEventBind）{
$（document）.unbind（'keyup'，null，'right'，function（）{$（'.next'）。单击（）；}）；
$（文档）.unbind（'keyup'，null，'left'，function（）{$（'.previous'）。单击（）；}）；
$（文档）.on（'keyup'，null，'right'，forward）；
$（文档）.on（'keyup'，null，'left'，back）；
covereventbind=true；
carouselEventBinded=false；
}
否则{
$（文档）.unbind（'keyup'，null，'right'，forward）；
$（文档）.unbind（'keyup'，null，'left'，back）；
$（document）.on（'keyup'，null，'right'，function（）{$（'.next'）。单击（）；}）；
$（document）.on（'keyup'，null，'left'，function（）{$（'.previous'）。单击（）；}）；
carouselEventBinded=true；
coverEventBinded=false；
}
}
});
函数IsElementViewPort（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（'窗高'+窗内高）；
返回rect.bottom>0&&
rect.top<（window.innerHeight | | document.documentElement.clientHeight）&&
右矩形>0&&
rect.left<（window.innerWidth | | document.documentElement.clientWidth）；
}

---

我现在遇到的问题是，有时即使底部是负值或小于0，我也会为

coverVisible

实现。有时CoverEventBind是真的，而它本不应该是真的。我不确定脚本有什么问题，它的行为是这样的？

你说的“完全可见”是什么意思？它要么是可见的，要么是不可见的，我想完全可见的意思是你可以看到它的全高可能是的，我会解决好的，我想我找到了你想要的，检查一下