Question

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

这是链接------＆gt; jsfiddle或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 == '')

因为.style.left的{{1}}在开头有一个空值。

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

以下是代码：（运行底部的代码段进行测试）

<div id="move">

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

以固定高度

1 个答案: