javascript - Javascript：无法访问属性“scrollLeft”

Question

我有简单的代码，它会自动从头到尾水平滚动滑块，然后反向滚动。

当我将代码输入到加载的站点以进行控制台时，代码工作正常，但是当我将它添加到我的 Javascript 时，此滑块的 HTML 动态插入到主页。

我认为这个脚本中可能存在一些问题，但我真的不知道在哪里。

感谢所有帮助

错误信息： 这里

脚本：

var logosIndustry = document.querySelector(".logos");
        function move() {
        logosIndustry.scrollLeft += 1;
        if(logosIndustry.scrollLeft >= (2600 - logosIndustry.offsetWidth)){
            clearInterval(interval);
            interval = setInterval(moveReverse,5);
        }
        }
        function moveReverse() {
        logosIndustry.scrollLeft -= 1;
        if(logosIndustry.scrollLeft <= 0){
            clearInterval(interval);
        }
        }
        interval = setInterval(move, 5)

标签： javascript

Answer 1

您的脚本在.logos元素位于 DOM 之前运行。

在 DOM 准备好后尝试运行它。

var logosIndustry;
var interval;

function move() {
  logosIndustry.scrollLeft += 1;
  if (logosIndustry.scrollLeft >= (2600 - logosIndustry.offsetWidth)) {
    clearInterval(interval);
    interval = setInterval(moveReverse, 5);
  }
}

function moveReverse() {
  logosIndustry.scrollLeft -= 1;
  if (logosIndustry.scrollLeft <= 0) {
    clearInterval(interval);
  }
}

window.addEventListener('DOMContentLoaded', () => {
  logosIndustry = document.querySelector(".logos");
  interval = setInterval(move, 5);
});