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

Question

我正在使用FullSlider.js来创建一个完整的幻灯片网页.如果红色元素完全可见,我需要浏览器来阻止滚动事件(意思是:窗口没有移动,但我能够接收动作),而且在我做了一些东西后我想再次启用滚动.

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

我读了很多关于这个的东西,并尝试了更多的解决方案,如:停止滚动:1.用jquery停止滚动网页根本不起作用

2. 如何以编程方式禁用页面滚动与jQuery确实停止滚动,但不能再次启用滚动

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

检查元素是否可见:

滚动后检查元素是否可见

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

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

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

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

实际上2.解决方案确实运行得很好,但我只是无法弄清楚我需要补偿"固定标题导航"的偏移量.

目前我正在使用"isScrolledIntoView"来检测位置是否合适(在大屏幕上运行良好,在小屏幕上根本不起作用).对于停止滚动,我使用以下hack:

CSS:.scrollHack {position:static; 溢出:隐藏; }

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

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

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

也许这会有所帮助。否则，如果能看到示例页面或 jsfiddle 示例，那就太好了。