滚动到纯javascript不工作

Scroll to pure javascript not working

本文关键字：工作 javascript 滚动      更新时间：2023-09-26

是的，我故意避免使用第三方库，移动设备上非常小的应用程序，不想拉任何东西。

我正在尝试使用这个scrollTo函数滚动到页面上的元素:

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);
}

我获取了一个span标签列表，每次用户单击下一个按钮时，我想使用它们作为滚动点:

var index = null;
function next() {
    var list = document.querySelectorAll("span");
    var element = null;
    if (index == null) {
        index = -1;
        element = document.body;
    } else {
      element = list[index];
    }
    index++;
    if (index >= list.length) {
        return;
    }
    var to = list[index];
    scrollTo(element, to.offsetTop, 250);
}

第一个next点击正确地滚动到第一个元素。但是，下一次单击不滚动。我调试了scrollTo方法，它似乎是元素。scrollTop变量在每次赋值时都不会改变。什么好主意吗?

您必须更改要滚动的元素的element.scrollTop，在本例中为document.body。你只在第一个电话中这样做。在那之后，你总是在列表项目上滚动，这是你的目标(什么没有效果，因为它没有溢出)。你应该这样调用你的scrollTop:

scrollTo(document.body, to.offsetTop, 250);

也许你也应该看看

window.scrollTo()
https://developer.mozilla.org/en/docs/Web/API/Window/scrollTo

我无法复制您的确切问题，但我确实发现我无法使用您编写代码的方式获得最后一个跨度。为了解决这个问题，我重写了一些东西。它可能会为您解决问题。

function next() {
    var list = document.querySelectorAll("span");
    var element = null;
    if (index == null) {
        index = -1;
        element = document.body;
    } else {
      element = list[index];
    }
    if (index >= list.length) {
        return;
    }
    if(index >= 0)
    {
        var to = list[index];    
        scrollTo(element, to.offsetTop, 250);
    }
    index++;
}

实际上，您试图过早地增加索引，导致它永远不会处理最后一个span。

相关文章：