Question

我有一张长桌子（宽度非常大），当我从左到右滚动那张桌子时，我想让它惯性移动。我的当前版本就是当我用手指滚动它时，它移动但是当我伸出手指时它停止了。我该怎么办？以下是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>

还有我的css代码：

table {
    table-layout: fixed;
    width: 100%;
    *margin-left: -100px;/*ie7*/
}
td, th {
    vertical-align: top;
    padding:2px;
    width:330px;
}

.outer {
    position:relative;
    margin-top: 2%;
}
.inner {
    overflow-x:scroll;
    overflow-y:visible;
    width:97%;
    margin-left:0%;
    -webkit-overflow-scrolling: touch;
}
.inner img{
    width: 100%;
}
.inner p{
    font-size: 20px;
    margin-top: 4%;
    margin-left: 1%;
}

Answer 1

我不确定你的要求。＆＃34;惯性＆＃34;在字典中不是一个单词。惯性是，但是没有运动AKA是一个保持静止的身体。请参阅：http://www.dictionary.com/browse/inertia

听起来桌子已经做了它需要做的事情，当用户的光标或手指释放桌子时...它会停止。

如果您希望它继续移动，您需要使用像jQuery这样的库来为其设置动画。 HTML + CSS不会自己做。你可以开始滚动onKeyDown＆amp;然后onMouseMove。它类似于编程拖拽和放大器。 drop操作，使用jQuery。一旦你设置了2个标志来跟踪onKeyDown＆amp;在onMouseMove中，两个标志都设置为true，然后您可以使用onKeyUp事件来运行动画。您可以使用.scrollLeft（）来继续保持移动。请参阅：https://api.jquery.com/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>

我在div中有一个长表，当我滚动表格时，我希望看到它惯性移动HTML

1 个答案: