javascript - 如何在javascript中控制元素的滚动条？

Question

我需要这样的东西:

var obj=document.getElementById('s');
obj.scrollRight(200);

HTML:

<div style="overflow-x=scroll;" id="s">
  Inline elements..
</div>

重要说明:我知道有一个“scrollTop(0)”函数，但我还需要知道是否还有一个 scrollRight(2)!

Answer 1

如果 scrollRight 是您想要重复使用的东西，那么就自己构建吧。计算它应该如何工作很容易:

HTML

<div class="container">
  <div class="big-element"></div>
</div>

CSS

.container {
  border: 1px solid #666;
  width: 1000px;
  height: 400px;
  overflow-x: scroll;
  overflow-y: hidden;
}

.big-element {
  width: 1500px;
  height: 400px;
  background: linear-gradient(to right, #AAA, #CCC);
}

JS

const container = document.querySelector('.container');
const bigel = document.querySelector('.big-element');

function scrollRight(value) {
  const available = bigel.offsetWidth - container.offsetWidth;
  container.scrollLeft = available - value;
}

scrollRight(200);

和here's a pen for you to play with .

PS:如果您真的想更频繁地使用它，您甚至可以将它构建到 Element 原型(prototype)中，尽管有些人不喜欢这样做.