Question

我有一个overflow-x div，其中包含各种项目的水平列表，这样一来所有元素都不可见。意图是div的内部内容最初滚动到最右边，然后在页面加载之后，然后在一段时间之后（使用setTimeout()）内部内容慢慢滚动到最左边，最好是{{ 1）} jQuery。

我已经尝试了.animate()，但却无法为此做好准备。

scrollLeft()

PS：我也在使用 jQuery ，所以它的功能也会起作用！

所以`＆＃39;应该仍然可以滚动

Answer 1

这是一个CSS解决方案

#inner_row {
  transform: translateX(calc(-100% - 100px));
  animation: goleft 2s forwards;
  animation-delay: 1s;
}

@keyframes goleft {
  to {
    transform: translateX(0);
  }
}

<div class="container" style="width:100px;whitespace:nowrap;overflow-x:scroll;">
  <div class=" row " id="inner_row" style="position:relative; ">
    <table>
      <tr>
        <td>Zero</td>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
        <td>Zero</td>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
      </tr>
    </table>
  </div>
</div>

这是一种使用javascript触发它的方法

document.getElementById('button').addEventListener('click', function() {
  document.getElementById('inner_row').classList.add('animate');
});

.animate {
  transform: translateX(calc(-100% - 100px));
  animation: goleft 2s forwards;
  animation-delay: 1s;
}

@keyframes goleft {
  to {
    transform: translateX(0);
  }
}

<div class="container" style="width:100px;whitespace:nowrap;overflow-x:scroll;">
  <div class=" row " id="inner_row" style="position:relative; ">
    <table>
      <tr>
        <td>Zero</td>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
        <td>Zero</td>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
      </tr>
    </table>
  </div>
</div>
<button id="button">click</button>

Answer 2

这样的东西？（或者请提供更多信息和代码）

$(document).ready( () => {
  $('.row').animate({
    left: 0
  },3000);
});

.container {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.row {
  width: 2000px;
  position:absolute;
  left: -1500px
}

td {
  width: 800px;
  background: yellow;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style=>
  <div class=" row " id="inner_row " style="position:relative; ">
    <table>
      <tr>
        <td>Zero</td>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
        <td>Zero</td>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
      </tr>
    </table>
  </div>
</div>

最初向右滚动div然后向左滚动溢出div

2 个答案: