防止滚动- 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

您必须使用$(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>

​

Answer 2

从以下方面获得的帮助：

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){
        	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>

​