javascript - 滚动到列表中的特定项目,然后滚动到列表中的下一个特定项目

标签 javascript jquery html scroll scrolltop

我正在开发基于网络的应用程序(使用Javascript,Jquery,html,css),只需按下键就会滚动这些 channel ,因为 channel 的数量大于屏幕的高度,我必须使用滚动功能当达到向下或向上每 10 个 channel 时,我使用 rollTop 方法来实现此目的。

所以让我像这样简化我的问题(如果有人回答这个问题,它可以帮助我实现我的实际目标)

我有元素列表,我知道如何滚动到列表中的特定元素,但我的目标是在第一次滚动到第 8 项、seTimeout 之后滚动到列表的下一个特定元素(第 14 项) 。我知道如何滚动到第一个特定元素,但我不知道超时后如何滚动到下一个特定元素(第 14 项)。

这是滚动第一个元素的代码,效果很好:

`http://jsfiddle.net/xY7tx/2339/`

基于上面有效的代码,我尝试添加以下代码,我的目标是首先它会滚动到第 8 项,然后 3 秒超时,然后它会滚动到第 14 项(这不会),请有人告诉我该如何解决这个问题,这是第二个代码,它不能按预期工作:

`http://jsfiddle.net/xY7tx/2338/`

谢谢!

最佳答案

您可以使用您想要使用的所有位置创建数组,并在超时后删除数组的第一个元素

    var container = $('div'),
        scrollTo = new Array($('#row_8'),$("#row_10"),$("#row_14"),$("#row_2"));

    container.scrollTop(
        scrollTo[0].offset().top - container.offset().top + container.scrollTop() 
    );

    scrollTo.shift();

    var refreshIntervalId = setInterval(function(){
    if(scrollTo.length!=0){
      container.scrollTop(
          scrollTo[0].offset().top - container.offset().top + container.scrollTop() 
      );
       scrollTo.shift();
    }else{
    clearInterval(refreshIntervalId);
    }   
    },3000);

编辑

添加检查数组是否为空停止间隔

Example

关于javascript - 滚动到列表中的特定项目,然后滚动到列表中的下一个特定项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36336692/

相关文章:

javascript - 在导航栏中滚动(Bootstrap 3),但保持页面的其余部分不变

jquery - 如何获取td表的实际宽度

jquery - 日期选择器不起作用

javascript - HTML5 data-* 属性上的 querySelector() 函数出错

javascript - 如何捕获php消息返回值并通过javascript警报显示它?

JavaScript 调用具有不同签名的函数

html - 如何使父宽度等于子宽度?

html - 我不知道 css 中的 ": "和 ". "有什么不同

javascript - 通过登录包含 id 的 url 来运行 JavaScript 函数

JavaScript Insert table into text editor without plugins(不建议使用插件)