прокрутите div сначала вправо, а затем влево внутри переполнения div

Question

У меня есть div overflow-x, который содержит горизонтальный список различных элементов таким образом, чтобы в то же время не все элементы были видны. Предполагается, что внутреннее содержимое div первоначально прокручивается до самой правой стороны, а затем после загрузки страницы, а затем через некоторое время (с использованием setTimeout()) внутренний контент медленно прокручивается в крайнее левое, предпочтительно с .animate() jQuery.

Я пробовал 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>