Question

我有一个固定大小的div，逐渐添加越来越多的内容，获得一个水平滚动条。我想要的是能够随时将滚动条一直强制到右侧，这样我就可以保持最新添加的内容始终可见，从而将旧内容推向左侧。但是如果不使用jQuery - 这对于一个功能来说似乎很愚蠢 - 我似乎无法想出办法来做到这一点。

Answer 1

您可以使用父控制器上的方向并从右向左设置

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。它适用于这个静态示例。

Answer 2

尝试将div的scrollLeft设置为scrollWidth。

e.g。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

如何控制div的水平滚动？

3 个答案: