滚动到纯javascript无法正常工作

是的我正在避免使用第三方lib，在移动设备上的非常小的应用程序，并且不想拉任何东西。滚动到纯javascript无法正常工作

我试图滚动到使用此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变量每次分配时都不会改变。有任何想法吗？

来源

2016-10-19 lostintranslation

你确认你的var列表中有多个项目吗？ – user1289451

是的，列表有4个项目。 – lostintranslation

您可以更改要滚动的元素的element.scrollTop，在这种情况下为document.body。你只是在第一个电话中这样做。之后，你总是滚动列表中的项目，这是你的目标（什么没有效果，因为它没有溢出）。你应该打电话给你scrollTop这样的：

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

也许你也应该看看

window.scrollTo()

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

来源

2016-10-19 20:27:15

这会导致它总是滚动到正文。如果你看他的代码，你会看到他正在基于递增索引设置元素。因此，每次单击下一个元素时，元素都应该更改，因为索引正在增加。 – user1289451

不，他的脚本改变了给定元素的'scrollTop'，这是滚动位置。 –

我想我明白你的意思了，但如果是这种情况，他不想改变element.scrollTop = element.scrollTop + perTick; to document.body = element.scrollTop + perTick;？他仍然想要增加元素var来改变我想的位置。 – user1289451

我是不是能复制您的具体问题，但我做了什么发现是我无法用你的代码编写的方式达到最后一个跨度。为了解决这个问题，我重写了一些东西。它可能会为您解决问题。

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

本质上，您试图快速增加索引，导致它永远不会处理最后一个跨度。

来源

2016-10-19 20:35:54 user1289451

滚动到纯javascript无法正常工作

回答

相关问题