以固定高度滚动滚动div

Question

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. 我有这个项目，当用户向下滚动并向上滚动以向右移动时，需要将红色div向左移动（您可以看到下面的代码）。 Point is that site is a fixed height and it must not have scrollbar. 关键是该站点是固定高度，并且不能具有滚动条。 JS must detect scroll not page height. JS必须检测滚动而不是页面高度。 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. 这是------> 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>

Thanks and have a great day or night :) 谢谢，祝你白天或晚上都愉快：)

Answer 1

You can create a separate function to handle the scroll event and use the window.onwheel() method to track mouse scrolling over the page. 您可以创建一个单独的函数来处理滚动事件，并使用window.onwheel()方法跟踪鼠标在页面上的滚动。

I added || moveRed.style.left == '' 我加了|| moveRed.style.left == '' || moveRed.style.left == '' to your if statement: || moveRed.style.left == ''到您的if语句：

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

since .style.left for <div id="move"> has an empty value at the beginning. 因为<div id="move"> .style.left开头具有空值。

Note: I also added CSS transition support for some other browsers. 注意：我还为其他一些浏览器添加了CSS过渡支持。

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>

以固定高度滚动滚动div

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-01-11 18:29:27

以固定高度滚动滚动div

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-01-11 18:29:27

解决方案1
0 已采纳 2018-01-11 18:29:27