我在div中有一張長桌子，當我滾動桌子時，我想看看它會慣性地移動HTML

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

我不確定你在問什么。 “慣性”不是詞典中的單詞。 慣性是，但運動的缺失又使身體保持靜止。 請參閱： http ： //www.dictionary.com/browse/inertia

聽起來當用戶的光標或手指釋放表時，表已經在做它需要做的事情了……它停止了。

如果希望它繼續前進，則需要使用jQuery之類的庫對其進行動畫處理。 HTML + CSS不會自己做到這一點。 您可以開始滾動onKeyDown和onMouseMove。 這類似於使用jQuery編程拖放操作。 一旦設置了2個標記來跟蹤onKeyDown和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 個解決方案

解決方案1
0 已采納 2016-03-11 16:54:07

我在div中有一張長桌子，當我滾動桌子時，我想看看它會慣性地移動HTML

問題描述

1 個解決方案

解決方案1 0 已采納 2016-03-11 16:54:07

解決方案1
0 已采納 2016-03-11 16:54:07