javascript - 检查元素是否完全可见，然后停止滚动

Question

我正在使用 FullSlider.js创建一个完整的幻灯片网页。如果红色元素完全可见，我需要浏览器阻止滚动事件(意味着:窗口没有移动，但我能够接收到 Action )并且在我做了一些事情之后我想再次启用滚动。

这就是我到目前为止所做的:

我阅读了很多关于此的内容并尝试了更多解决方案，例如: 停止滚动: 1. stop scrolling of webpage with jquery根本不起作用

1. How to programmatically disable page scrolling with jQuery停止滚动，但无法再次启用滚动

2. 事件阻止默认，在 chrome 中工作正常，但在 firefox 中工作不太好

检查元素是否可见:

Check if element is visible after scrolling

我使用了上面的解决方案并尝试过:

1. 检查红色元素是否可见(没用)
2. 检查红色元素上方的小跨度是否可见(效果不佳)
3. 检查红色元素下方的小跨度是否可见(效果不佳)

4. 检查元素上方和下方的微小跨度是否可见(根本不起作用)

5. 尝试了一些关于获取红色元素的 scrollTop 并检查主体的 scrollTop 是否等于或接近的想法

事实上，2. 解决方案确实运行良好，但我无法计算出补偿“固定标题导航”所需的偏移量。

目前我正在使用“isScrolledIntoView”来检测位置是否合适(在大屏幕上效果很好，在小屏幕上根本不起作用)。对于停止滚动，我使用了以下技巧:

CSS: .scrollHack { 位置:静态；溢出:隐藏；

JS:

  $(document).on('mousewheel', function(event, delta) {
      // stopScroll and isStopped are booleans delivered by another script
      if(isScrolledIntoView($("#s3")))
      {
        isStopped = false; 
        if(delta >= 0) {
         $('#s3').get(0).contentWindow.car.next(); //  car.next();
        }
        else{
         $('#s3').get(0).contentWindow.car.previous(); 
        }    
        stopScroll = $('#s3').get(0).contentWindow.isStopped; 
      }
     if(!stopScroll && isScrolledIntoView($("#s3")))
     {
      event.preventDefault(); 
      $("body").addClass("scrollHack");
     }
     else
     {
          $("body").removeClass("scrollHack"); 
     }

});

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

有人遇到过熟悉的情况并且有一些脚本或技巧可以帮助我吗？

Answer 1

抱歉，我还不能在评论中回答。因此，关于您问题的第二部分，这只是部分答案。

用于检查您的元素是否完全可见:

• 尝试使用 jQuery innerHeight()而不是 height()。这为您提供了没有边距和边框的元素高度。

• 没有必要检查红色元素上方的微小跨度。这不就等于只检查红色元素的顶部是否在屏幕上吗？你可以这样做:

  function isScrolledIntoView(elem) {        
      var docViewTop = $(window).scrollTop();
      var elemTop = $(elem).offset().top;
      return (elemTop >= docViewTop));
  }
  

  但这只是检查元素的顶部是否可见!

• 您说您当前的解决方案在小屏幕上效果不佳。会不会是您正在检查的元素比小屏幕上的视口(viewport)高？

也许这有点帮助。否则，看到示例页面或 jsfiddle 示例会非常好。