Question

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

我正在尝试使用此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);
}

第一次下一次点击正确滚动到第一个元素。但是，下一次单击不会滚动。我调试了scrollTo方法，看来每次分配element.scrollTop变量时都不会改变。有什么想法吗？

Answer 1

您要更改要滚动的元素的element.scrollTop，在本例中为document.body。你只是在第一次通话中这样做。之后，你总是滚动列表项目，这是你的目标（没有任何效果，因为它没有溢出）。你应该像这样打电话给scrollTop：

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

也许你也应该看看

window.scrollTo()

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

Answer 2

我无法复制您的确切问题，但我发现的是我无法按照您的代码编写方式进入最后一个范围。为了解决这个问题，我重写了一些事情。它可能会为您解决问题。

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

基本上，您试图过早地增加索引，导致它永远不会处理最后一个跨度。

滚动到纯javascript无法正常工作

2 个答案: