我如何确保我的变量在setInterval内部不变

Question

我想按时更改div的scrollLeft，

让它变得简单：

var initialValue = $('#myDiv').scrollLeft();
var x = setInterval(function() {
$('#myDiv').scrollLeft("#some value calculated depending on initialValue")
}, 10)

问题是initialValue随时间变化，当我将其放在setInterval中时，仍然存在相同的问题。我如何确保我的initialValue变量在setInterval内部不会改变？

Answer 1

只需直接使用scrollWidth属性即可：

注意：如果要从特定的滚动点开始，只需将el.scrollWidth设置为该起始值

var el = document.querySelector('#myDiv');
var step = (el.scrollWidth - el.scrollLeft)/10;
var x = setInterval(function() {
  el.scrollLeft += step;
  if(el.scrollLeft >= el.scrollWidth - el.clientWidth) clearInterval(x);
}, 100);

#myDiv {
  border: 1px solid black;
  width: 250px;
  margin-bottom: 12px;
  overflow-x: scroll;
}

<div id="myDiv">
  ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
</div>