Javascript 我在一个div中有一个长表，当我滚动该表时，我希望看到它以惰性的方式移动_Javascript_Html_Css

Javascript 我在一个div中有一个长表，当我滚动该表时，我希望看到它以惰性的方式移动

javascript html css

Javascript 我在一个div中有一个长表，当我滚动该表时，我希望看到它以惰性的方式移动,javascript,html,css,Javascript,Html,Css,我有一个很长的桌子（宽度很大），当我从左向右滚动桌子时，我希望它能惯性地移动。我的当前版本是当我用手指滚动它时，它移动了，但当我举起手指时它停止了。我该怎么办？下面是我在div中为该表编写的HTML代码的一部分 <div class="welcomeProgram"> <p class=programTitle>Project</p> <div class="outer

我有一个很长的桌子（宽度很大），当我从左向右滚动桌子时，我希望它能惯性地移动。我的当前版本是当我用手指滚动它时，它移动了，但当我举起手指时它停止了。我该怎么办？下面是我在div中为该表编写的HTML代码的一部分

           <div class="welcomeProgram">
                <p class=programTitle>Project</p>
                <div class="outer">
                    <div class="inner">
                        <table>
                            <tr>
                                <td><a href="#"><img src="img/ast_youxue.png"/></a><p>Project1</p></td>
                                <td><a href="#"><img src="img/canada_youxue2.png"/></a><p>project2</p></td>
                                <td><a href="#"><img src="img/usa_youxue2.png"/></a><p>project3</p></td>
                                <td><a href="#"><img src="img/uk_youxue2.png"/></a><p>project4</p></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

我不知道你在问什么。字典里没有“惰性”这个词。惯性是，但它是静止的物体没有运动。见：

听起来，当用户的光标或手指释放表格时，表格已经在做它需要做的事情了。。。它停了

如果希望它继续移动，则需要使用jQuery之类的库来设置动画。HTML+CSS本身无法做到这一点。您可以启动滚动键onKeyDown&然后onMouseMove。这类似于使用jQuery编程拖放操作。一旦设置了两个标志来跟踪onKeyDown&onMouseMove，其中两个标志都设置为true，那么就可以使用onKeyUp事件来运行动画。可以使用.scrollLeft（）使其继续移动。见：

请你澄清一下，你想要这张桌子做什么

编辑：我试图将此添加到评论中，但不适合。看看这是否有帮助

<html>
<head>
  <style>
    .wrap {
      overflow-y: scroll;
    }
    table {
      width: 10000px;
    }
  </style>
</head>
<body>
  <div class="wrap"></div>
</body>
<footer>
  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script>
    $(function() {
      // Generate Table
      var table = '<table border="1"><tr>';
      for (var i=0; i<1000; i++) {
        table += '<td>Hi</td>';
      }
      table += '</tr></table>';
      $('.wrap').html(table);

      // Run Animation
      $('.wrap').on('scroll', function(){
          $(this).animate({
            scrollLeft: "+=50"
          }, 800);
      });
    });
  </script>
</footer>
</html>


.包裹{
溢出y：滚动；
}
桌子{
宽度：10000px；
}
$（函数（）{
//生成表
var表=“”；
对于（var i=0；你能给我举个例子吗？我尝试使用scrollleft，但失败了当用户松开手指时，表格应该滚动然后缓慢停止。我发现一个问题，当我滚动它时，它会继续滚动，如何让它停止？使用递减变量。尝试使用演示设置var pixels=50。然后使用pixels-，这样每次动画运行时…它都会将像素递减-1。我会添加at作为动画函数的第三个参数。使用scrollLeft:“+=”+像素在动画JSON代码中，滚动最终会减慢到停止。因此它应该移动50px，然后49px，然后48px，…2px，1px，0px。如果在动画代码周围添加If语句，则只能在onMouseUp标志设置为true时启动动画。还必须向t添加onMouseUp事件框那个布尔值。但是，我还有一些问题？如何判断用户是从左向右滚动还是从右向左滚动？因为它只适用于从左向右滚动的情况
<html>
<head>
  <style>
    .wrap {
      overflow-y: scroll;
    }
    table {
      width: 10000px;
    }
  </style>
</head>
<body>
  <div class="wrap"></div>
</body>
<footer>
  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script>
    $(function() {
      // Generate Table
      var table = '<table border="1"><tr>';
      for (var i=0; i<1000; i++) {
        table += '<td>Hi</td>';
      }
      table += '</tr></table>';
      $('.wrap').html(table);

      // Run Animation
      $('.wrap').on('scroll', function(){
          $(this).animate({
            scrollLeft: "+=50"
          }, 800);
      });
    });
  </script>
</footer>
</html>