Prevent scroll - JQuery

Question

I tried to prevent scroll using JQuery e.preventDefault();but nothing happened, what I need is stop the scroll and when the animation div come in the right of the screen, the scroll must work:

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

Please run code snippet in fullscreen

I don't know why you decide that this question is duplicate? there are a difference, I'd like to prevent scroll then run it depend on some conditions. — MoHamed HaSsn, Apr 23 '17 at 08:35

Spring · Answer 1 · 2017-04-23T12:13:54.343

You have to set the scroll using $(window).scrollTop(windowScroll); e.preventDefault Wont work for that :

see bellow Example :

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

thank you very much, it's what I need but there are simple problem that If the user click on the arrow keys the animation will not work why!! — MoHamed HaSsn, Apr 23 '17 at 09:45
You're Welcome akhi mohamed , By the way I just tried in chrome to use arrow keys and it works well !! , could you please recheck , or give which browser you're using :) — Spring, Apr 23 '17 at 12:17
Thank you akhi, could I use http://prinzhorn.github.io/skrollr/ plugin to make this animation, but the problem that I don't know how to use this plugin, please could you help me. — MoHamed HaSsn, Apr 23 '17 at 13:48

score 0 · Answer 2 · edited May 23 '17 at 12:34

Help taken from:

How to disable scrolling temporarily?

Although your question is not duplicate of the above question. But this will help you to have the right approach. What you are wishing is that your window should not scroll. And on your mousewheel movement you want the animation to run.

So instead of running your animation on scroll event. You should run it with mousewheel event.

window scroll will essentially run when your window scrolls, which you don't wish to do until the animation is completed. So disable the window scroll and detect the mousewheel movement and run your animation. And once your animation is finished enable the scroll once again.

This is definitely not the finally solution for you but should guide you in the right direction.

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

thank you for your try, but it's not what I need, by chance I founded an example: [link](http://www.lexusls.asia/) please scroll to the third section (dark section) and you will note it :) :) — MoHamed HaSsn, Apr 23 '17 at 09:00

Prevent scroll - JQuery

2 Answers2