如何控制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);