如何链接多个JavaScript `scroll()`？

vbkedwbf 于 2023-11-15 发布在 Java

关注(0)|答案(2)|浏览(154)

我有一个这样的页面和脚本：

期望行为：

我想滚动到每个listitem暂停一秒钟，然后滚动到下一个listitem，并继续直到列表的末尾。

重现问题所需的最短代码：

我尝试的代码看起来像这样：

const sleep = (time) => new Promise(res => setTimeout(res, time, "done sleeping"));

let elm = document.querySelector('#pane-side');
let listitems = elm.children[0].children[0].children
for (let index = 0; index < listitems.length; index++) {
  const y = listitems[index].getBoundingClientRect().top + window.scrollY;
  elm.scroll({
    top: y,
    behavior: 'smooth'
  });
  sleep(1000).then(msg => console.log(msg));
}

个字符

具体问题或错误：

它只滚动一次到第一个listitem，然后什么也不做。

尝试次数：

我尝试的另一个变体是
elm.scroll({..})个
与
listitems[index].scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });个
一次都没滚动过

JavaScript

来源：https://stackoverflow.com/questions/77459972/how-to-chain-multiple-javascript-scroll

2条答案

按热度按时间

ippsafx71#

你需要更多的CSS来实现这一点
为什么不用interval呢？
这是一个使用你原来的滚动条而不移动页面的版本。我不得不调整offsetTop来处理边距和填充
将计数更改为
const listItem = listitems[cnt % len];
并将cnt++添加到要循环的函数的末尾

let cnt = 0, tId;
const elm = document.querySelector('#pane-side');
const listitems = elm.querySelectorAll("[role=listitem]");
const len = listitems.length;

const scrollDiv = () => {
  const listItem = listitems[cnt];
  const topPosition = listItem.offsetTop-7; // adjusted for padding/margin
  elm.scroll({
    top: topPosition,
    behavior: 'smooth'
  });
  cnt++;
  // stop at the end
  if (cnt >= listitems.length) {
    clearInterval(tId);
    return; 
  }

};
scrollDiv(); // start
tId = setInterval(scrollDiv, 1000)

#pane-side {
  height: 1000px;
  overflow: scroll
}

[role=listitem] {
  height: 500px;
  background-color: red
}

<div id="pane-side">
  <div>
    <div>
      <div>
        <div role="listitem">1</div>
        <div role="listitem">2</div>
        <div role="listitem">3</div>
        <div role="listitem">4</div>
        <div role="listitem">5</div>
        <div role="listitem">6</div>
        <div role="listitem">7</div>
      </div>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-11-15

xmakbtuz2#

实现这一点的一种方法是使用一个通过setTimeout()递归调用的函数，每次调用时递增索引。注意，您可以使用模运算符来确保索引永远不会越界。

let elm = document.querySelector('#pane-side');
let listitems = elm.children[0].children[0].children[0].children;

const scrollToItem = index => {
  listitems[index % listitems.length].scrollIntoView({
    behavior: "smooth",
    block: "end",
    inline: "nearest"
  });
  setTimeout(() => scrollToItem(++index), 1000);
}
scrollToItem(0);

字符串
下面是一个例子：https://jsfiddle.net/6srbtvjz/。
请注意，我必须将其放置在jsFiddle中，因为在使用片段时滚动会导致SO布局出现问题。

赞(0）回复(0）举报 2023-11-15

我来回答

如何链接多个JavaScript `scroll()`？

2条答案

相关问题

热门标签

最新问答