如何控制div的水平滾動？

Question

我有一個固定大小的div，逐漸添加越來越多的內容，獲得一個水平滾動條。我想要的是能夠隨時強制滾動條到我想要的位置，這樣我就可以保持最新添加的內容始終可見，並將舊內容向左移動。但是，如果不使用jQuery--這對於一個功能來說似乎很愚蠢 - 我似乎無法找到一種方法來做到這一點。

Answer 1

你可以使用家長控制的方向和正確的設置到左

<div class="container"> 
<div class="scroller"> 

</div> 
</div> 

div.container{ 
width:400px; 
height:300px; 
overflow-x:scroll; 
direction:rtl; 
} 

div.scroller{ 
    width:1000px; 
    height:300px; 
} 

確保你包裹在你的滾動內容，並設置方向爲LTR應該做您的需要。僅在Mac上進行測試，但rtl是您需要的。如果你的容器是動態的，你可能需要像scrollIntoView（）這樣的js。它適用於這個靜態示例。

Answer 2

嘗試將div的scrollLeft設置爲scrollWidth。

例如

document.getElementById("btnAdd").onclick = function() { 
 

 
    var divContent = document.getElementById("divContent"); 
 
    divContent.innerHTML += "<span>some stuff </span>"; 
 
    divContent.scrollLeft = divContent.scrollWidth; 
 

 
};

#divContent { 
 
    overflow-x: auto; 
 
    overflow-y: hidden; 
 
    height: 50px; 
 
    width: 300px; 
 
    white-space: nowrap; 
 
}

<div id="divContent"></div> 
 
<button id="btnAdd">add</button>

Answer 3

您可以使用scrollIntoView()，它會滾動的特定項目進入視野。

here's an example

CSS

.cont{ 
    width: 200px; 
    height: 100px; 
    border: 1px solid black; 
    overflow: auto; 
    overflow-y: hidden; 
    white-space: nowrap; 
} 

.element{ 
    width: 50px; 
    margin: 10px; 
    font-size: 40px; 
    display: inline-block; 
} 

HTML

<div class="cont"> 
    <div class="element">1</div> 
    <div class="element">2</div> 
    <div class="element">3</div> 
    <div class="element">4</div> 
    <div class="element">5</div> 
    <div class="element">6</div> 
</div> 

的JavaScript

function scrollTo(item) { 
    document.getElementsByClassName('element')[item].scrollIntoView();  
}; 

scrollTo(5);