divの水平スクロールを制御するにはどうすればよいですか？

Question

私は、徐々にコンテンツを追加する固定サイズのdivを持ち、水平スクロールバーを取得しています。私が望むのは、いつでもスクロールバーを強制的に右に移動させて、最新のコンテンツを常に見えるようにし、古いコンテンツを左に移動させることです。しかし、jQueryを使用せずに（これは1つの機能では馬鹿げていると思われますが）、これを行う方法を理解できないようです。

Answer 1

あなたは、親コントローラ上方向を使用して、あなたが必要とする何をすべきLTRにごスクロールし、設定された方向でコンテンツをラップしてください

<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; 
} 

を右から左にそれを設定することができます。 Macのchromeでのみテストされていますが、rtlは必要なものです。コンテナが動的である場合は、scrollIntoView（）のようないくつかのjをplonkする必要があります。この静的な例で動作します。

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);