防止滚动 - JQuery的

Question

我试图阻止使用JQuery e.preventDefault();滚动，但什么都没有发生，我需要的是停止滚动，当动画DIV走在了屏幕的右侧，滚动必须工作：

$(document).ready(function() { 
 
    $(window).on('scroll', function (e) { 
 
     var animation = $(".my-container .animation"), 
 
      windowScroll = $(window).scrollTop(); 
 
     if (parseInt(animation.css('left')) + animation.width() < $(window).width()) { 
 
      e.preventDefault(); 
 
      animation.css('left', windowScroll * 1.5); 
 
     } 
 
     else { 
 
      // enable scroll 
 
     } 
 
}); 
 
})

.my-container{ 
 
    width:100%; 
 
    height:620px; 
 
    position:relative; 
 
    overflow:hidden; 
 
    background-color:#333333; 
 
} 
 
.my-container .animation{ 
 
    position:absolute; 
 
    width:420px; 
 
    height:200px; 
 
    bottom:0; 
 
    left:0; 
 
    background-color:#02f15f; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<section class="my-container"> 
 
    <div class="animation"></div> 
 
</section>

请运行在全屏

Answer 1

帮助代码片段摘自：

How to disable scrolling temporarily?

虽然你的问题不是上述问题的重复。但这会帮助你有正确的方法。你所希望的是你的窗户不应该滚动。并且您想要动画运行在您的mousewheel移动上。

因此不是在scroll事件上运行您的动画。您应该使用mousewheel事件来运行它。

当您的窗口滚动时，窗口滚动将基本上运行，直到动画完成后，您不希望这样做。因此，请禁用window scroll并检测mousewheel移动并运行您的动画。一旦你的动画完成，再次启用滚动。

这绝对不是您的最终解决方案，但应引导您朝着正确的方向发展。

$(document).ready(function() { 
 
var keys = {37: 1, 38: 1, 39: 1, 40: 1}; 
 

 
function preventDefault(e) { 
 
    e = e || window.event; 
 
    if (e.preventDefault) 
 
     e.preventDefault(); 
 
    e.returnValue = false; 
 
} 
 

 
function preventDefaultForScrollKeys(e) { 
 
    if (keys[e.keyCode]) { 
 
     preventDefault(e); 
 
     return false; 
 
    } 
 
} 
 

 
function disableScroll() { 
 
    if (window.addEventListener) // older FF 
 
     window.addEventListener('DOMMouseScroll', preventDefault, false); 
 
    window.onwheel = preventDefault; // modern standard 
 
    window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE 
 
    window.ontouchmove = preventDefault; // mobile 
 
    document.onkeydown = preventDefaultForScrollKeys; 
 
} 
 

 
function enableScroll() { 
 
    if (window.removeEventListener) 
 
     window.removeEventListener('DOMMouseScroll', preventDefault, false); 
 
    window.onmousewheel = document.onmousewheel = null; 
 
    window.onwheel = null; 
 
    window.ontouchmove = null; 
 
    document.onkeydown = null; 
 
} 
 

 
disableScroll(); 
 
var i = 0; 
 
$('.my-container').bind('mousewheel', function(e){ 
 
     var animation = $(".my-container .animation"), 
 
      windowScroll = $(window).scrollTop(); 
 
     if (parseInt(animation.css('left')) + animation.width() < $(window).width()) { 
 
      e.preventDefault(); 
 
      animation.css('left', i * 1.5); 
 
     } 
 
     else { 
 
      // enable scroll 
 
     }  
 
     
 
     if(i >= 100){ 
 
     \t enableScroll(); 
 
     }else{ 
 
      i++; 
 
     } 
 
}); 
 
})

.my-container{ 
 
    width:100%; 
 
    height:620px; 
 
    position:relative; 
 
    overflow:hidden; 
 
    background-color:#333333; 
 
} 
 
.my-container .animation{ 
 
    position:absolute; 
 
    width:420px; 
 
    height:200px; 
 
    bottom:0; 
 
    left:0; 
 
    background-color:#02f15f; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<section class="my-container"> 
 
    <div class="animation"></div> 
 
</section>

Answer 2

你必须设置使用$(window).scrollTop(windowScroll);e.preventDefault对于惯于工作滚动：

参见下文示例：

$(document).ready(function() { 
 
    var windowScroll = $(window).scrollTop(); 
 
    $(window).on('scroll', function (e) { 
 
     var animation = $(".my-container .animation"); 
 
      
 
     if (parseInt(animation.css('left')) + animation.width() < $(window).width())   { 
 
      var scrl = $(window).scrollTop(); 
 
      $(window).scrollTop(windowScroll); 
 
      //console.log(parseInt(animation.css('left'))); 
 
      animation.css('left', parseInt(animation.css('left')) + (scrl * 1.5)); 
 
     } 
 
     else { 
 
      // enable scroll 
 
     } 
 
}); 
 
})

body{ 
 
    height:2000px; 
 
} 
 

 
.my-container{ 
 
    width:100%; 
 
    height:400px; 
 
    position:relative; 
 
    overflow:hidden; 
 
    background-color:#333333; 
 
} 
 
.my-container .animation{ 
 
    position:absolute; 
 
    width:420px; 
 
    height:200px; 
 
    bottom:0; 
 
    left:0; 
 
    background-color:#02f15f; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<section class="my-container"> 
 
    <div class="animation"></div> 
 
</section>