最初滾動div到右邊然後在溢出區域內左邊

我有一個overflow-x div，其中包含各種項目的水平列表，以便一次不會顯示所有元素。目的是div的內容首先被滾動到最右邊，然後在頁面被加載後，然後在某個時候（使用setTimeout()），內容緩慢滾動到最左邊，最好是jQuery的.animate()。

我已經嘗試scrollLeft()，但無法爲此解決。最初滾動div到右邊然後在溢出區域內左邊

<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的也，所以它的功能也將正常工作！

同樣的`」應仍保持在滾動

來源

2017-02-17 Lincoln

這裏有一個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>

來觸發它的方式

來源

2017-02-17 06:48:39

這個作品！但不是來自JavaScript或jQuery的，所以它也可以用用戶事件來完成嗎？ – Lincoln

@Lincoln當然，你可以通過添加一個包含這些改變的類來觸發它。更新了我的答案。 –

這樣的事情？（或請提供一些更多的信息&代碼）

$(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>

來源

2017-02-17 07:01:06

不是這個！而是從右向左滾動** overflow-x ** div中的實際內容 – Lincoln

最初滾動div到右邊然後在溢出區域內左邊

回答

相關問題