防止滚动 - JQuery

Question

我试图阻止使用JQuery e.preventDefault();滚动但没有任何反应，我需要的是停止滚动，当动画div出现在屏幕右侧时，滚动必须工作：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

请全屏运行代码段

Answer 1

您必须使用$(window).scrollTop(windowScroll); e.preventDefault设置滚动不适用于此：

见下文示例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

帮助来自：

How to disable scrolling temporarily?

虽然您的问题与上述问题不重复。但这将有助于您采取正确的方法。你想要的是你的窗户不应该滚动。在mousewheel移动中，您希望动画能够运行。

所以不要在scroll事件上运行动画。您应该使用mousewheel事件运行它。

当您的窗口滚动时，

窗口滚动基本上会运行，在动画完成之前您不希望这样做。因此，请停用window scroll并检测mousewheel移动并运行动画。动画完成后再次启用滚动。

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

＆＃13;

＆＃13;

$(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++;
        }
});
})

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;