如何控制div的水平滚动？
如何控制div的水平滚动？
提问于 2017-07-29 18:38:56
我有一个固定大小的div，它逐渐添加越来越多的内容，获得一个水平滚动条。我想要的是能够在我想要的时候强制滚动条一直到右边，这样我就可以让最新添加的内容始终可见，从而将较旧的内容移到左边。但是如果不使用jQuery --这对于一个特性来说似乎很愚蠢--我似乎想不出一种方法来做到这一点。
回答 2
Stack Overflow用户
发布于 2017-07-29 18:52:17
尝试将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>
Stack Overflow用户
发布于 2017-07-29 18:49:19
您可以使用父控制器上的方向，并将其从右向左设置
div.container {
width: 400px;
height: 300px;
overflow-x: scroll;
direction: rtl;
}
div.scroller {
width: 1000px;
height: 300px;
}<div class="container">
<div class="scroller">
</div>
</div>
确保在滚动条中包含内容，并将方向设置为ltr，这样可以满足您的需求。只在mac上的chrome上测试，但rtl是你需要的。如果你的容器是动态的，你可能需要使用一些像scrollIntoView()这样的js。它适用于这个静态示例。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45388268
复制相关文章
相似问题