小编Qul*_*une的帖子

我正在使用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 …