Slide in div on scroll with fixed height

everybody. I have a problem and I hope that someone can help me out. I have this project and I need to move red div to left (you can see the code below) when user scroll down and when he scrolls up to move to the right. Point is that site is a fixed height and it must not have scrollbar. JS must detect scroll not page height. I tried everything I could find and spend almost one week on this problem If it could be responsive that would be great if not its OK.

Here is the link ------> jsfiddle or codepen I have placed a button just so you can see what effect I wish to achieve.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <title>Document</title>
    </head>
    <style>
      body{
            overflow: hidden;
            margin: 0;
            padding: 0;
          }
      #blue{
            background: blue;
            width: 100%;
            height:50vh;
            position: absolute;
            bottom: 0;
           }

       .red{
            background: red;
            width: 2000px;
            height: 500px;
            position: absolute;
            /* position to be changed to 1000px */
            left: 2000px;
            transition: 2s ease-in-out;
           }
    </style>

    <body>
      <button onclick="slide()">press</button>
      <div id="move" class="red">red</div>
      <div id="blue">blue</div>

    <script>
        function slide(){
        let moveRed = document.getElementById('move');
        if(moveRed.style.left=='2000px'){
        moveRed.style.left = '500px';
        }else{
        moveRed.style.left = '2000px';
       }
       }
    </script>
    </html>

Thanks and have a great day or night :)

Solution

You can create a separate function to handle the scroll event and use the window.onwheel() method to track mouse scrolling over the page.

I added || moveRed.style.left == '' to your if statement:

if(moveRed.style.left=='2000px' || moveRed.style.left == '')

since .style.left for <div id="move"> has an empty value at the beginning.

Note: I also added CSS transition support for some other browsers.

Here is the code: (run the snippet at the bottom to test)

window.onwheel = wheelslide;

// window scroll function
function wheelslide(e)
{
  var moveRed = document.getElementById('move');
  
  // scrolling downward
  if(e.deltaY > 0)
  {
    if(moveRed.style.left == '2000px' || moveRed.style.left == '') moveRed.style.left = '500px';
  }
  else
  {
    if(moveRed.style.left == '500px') moveRed.style.left = '2000px';
  }
}

// button function
function slide()
{
  let moveRed = document.getElementById('move');
  
  if(moveRed.style.left=='2000px' || moveRed.style.left == '')
  {
    moveRed.style.left = '500px';
  }
  else
  {
    moveRed.style.left = '2000px';
  }
}

body{
            overflow: hidden;
            margin: 0;
            padding: 0;
          }
      #blue{
            background: blue;
            width: 100%;
            height:50vh;
            position: absolute;
            bottom: 0;
           }

       .red{
            background: red;
            width: 2000px;
            height: 500px;
            position: absolute;
            left: 2000px;
            transition: 2s ease-in-out;
            -moz-transition: 2s ease-in-out;
            -webkit-transition: 2s ease-in-out;
           }

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<title>Document</title>
</head>

<body>
<button onclick="slide()">press</button>
<div id="move" class="red">red</div>
<div id="blue">blue</div>
</body>
</html>