Question

graphic illustrating issue

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

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

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

How to programmatically disable page scrolling with jQuery会停止滚动，但无法再次启用滚动
事件阻止默认，在chrome中工作正常，但在firefox

检查元素是否可见：

Check if element is visible after scrolling

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

检查红色元素是否可见（不起作用）
检查红色元素上方的小跨度是否可见（效果不佳）
检查红色元素下方的小跨度是否可见（效果不佳）
检查元素上方和下方的小跨度是否可见（根本不起作用）
试图获取红色元素的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示例真的很棒。

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

1 个答案: