javascript - 如何在没有 jQuery 的情况下在模态中创建平滑滚动到给定 id 的元素

Question

所以我有一个 onclick 事件的代码，这将导致在普通（无 jquery）Javascript 中平滑滚动到给定 id 的元素，现在我想在模态中实现它。

function scrollTo(element, to, duration) {
  if (duration <= 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 10;

  setTimeout(function() {
    element.scrollTop = element.scrollTop + perTick;
    if (element.scrollTop === to) return;
    scrollTo(element, to, duration - 10);
    }, 10);
}


 elmnt = document.getElementById("example");
 scrollTo(document.body, elmnt.offsetTop, 600);

对于 id = "example" 的元素。我有一个 id = "myModal" 和 CSS 属性 overflow-y 的模态：滚动，当点击事件触发时，我希望模态平滑滚动到 id = "poleTimeDiv" 的元素。

有任何想法吗？

标签： javascriptscrollmodal-dialog

Answer 1

我们都知道，这可以解决问题。

CSS

.scrollable-content {
    scroll-behavior:smooth;
}

Javascript

document.querySelector('poleTimeDiv').scrollIntoView({ behavior: 'smooth' });