最初将div滚动到右，然后在溢出div内向左滚动

Question

我有一个overflow-x div，它以各种方式包含所有项目的水平列表，使得一次并非所有元素都可见。 打算将div的内部内容最初滚动到最右侧，然后在加载页面之后， .animate()一段时间（使用setTimeout() ），将内部内容缓慢滚动到最左侧，最好使用jQuery .animate() 。

我已经尝试过scrollLeft()但是无法做到这一点。

<div id="container" style="width:100%;whitespace:nowrap;overflow-x:scroll;>
                <div class="row" id="inner_row">
                    <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>

PS：我也在使用jQuery ，因此它的功能也将起作用！

同样，“”仍应保持可滚动状态

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>