Edge/Opera/Chrome 中的 Javascript 滚动问题

Question

我正在为我的食谱网站制作一个 CSGO 风格的盒子，当你想要一个随机食谱时。 但是我在滚动时遇到了几个问题。它有几个浏览器兼容性问题，它在 Edge、Opera 和 Chrome 中根本不起作用，只有 Firefox 可以正常处理。

我在这里用相关代码做了一个小codepen：https://codepen.io/jlmadsen/pen/GRWKLKv

但我怀疑这个代码块是罪魁祸首。

let total_length = image_container.scrollWidth - (450*2.5)
image_container.scrollTo(0,0)

scroll_interval = setInterval(() => {
  let remaining = total_length - image_container.scrollLeft
  
  // if further than 30 units away keep scrolling
  if (remaining > 30) {
    let distance = remaining / 15
    image_container.scrollTo(image_container.scrollLeft + distance, 0);
  } else {
    // stop scroling
  }
}, 15 );

希望有人可以帮助我解决浏览器的兼容性问题。

Answer 1

问题是你的间隔太短了。浏览器没有时间“加速”滚动。

在这种情况下，scrollBy() 可能更合适。