在固定高度的滚动条上滑入 div

Question

各位。我有一个问题，我希望有人能帮助我。我有这个项目，当用户向下滚动和向上滚动以向右移动时，我需要将红色 div 向左移动（您可以看到下面的代码）。重点是网站是固定高度的，不能有滚动条。 JS 必须检测滚动而不是页面高度。我尝试了所有我能找到的东西，并花了将近一个星期的时间来解决这个问题。如果它可以响应，那就太好了。

这里是 link ------> jsfiddle or codepen 我已经放置了一个按钮，以便您可以看到我希望达到的效果。

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

谢谢，祝你度过愉快的一天或一晚:)

Answer 1

您可以创建一个单独的函数来处理滚动事件，并使用 window.onwheel() 方法来跟踪鼠标在页面上的滚动。

我在您的 if 语句中添加了 || moveRed.style.left == ''：

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

因为 <div id="move"> 的 .style.left 在开头有一个空值。

注意：我还为其他一些浏览器添加了CSS转换支持。

这里是代码：（运行底部的代码片段进行测试）

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>

在固定高度的滚动条上滑入 div

Slide in div on scroll with fixed height

javascript

position

slide