通过按键和按键向下滚动到下一个元素scrollTo插件 - jQuery [英] Scrolling down to next element via keypress & scrollTo plugin - jQuery

问题描述

我正在使用jQuery的 scrollTo 插件来向上和向下滚动页面，使用向上箭头和向下箭头。

I am using jQuery's scrollTo plugin to scroll up and down my page, using UP arrow and DOWN arrow.

我有一堆带有屏幕类的div，如下所示：< div class = screen-wrapper> ...< / div>

i have a bunch of div with class "screen", as so: <div class="screen-wrapper">...</div>

当我按UP或DOWN时，我想要做的是，窗口滚动到下一个或前一个div，类为screen。

What I am trying to do is, when i press UP or DOWN, the window scrolls to the next, or previous div with class of "screen".

我有按键处理的按键。
根据插件文档，要滚动窗口，你使用$ .scrollTo（...）;

I have the keypresses taken care of. According to the plugin docs, to scroll a window, you use $.scrollTo(...);

这是我的代码：

$(document).keypress(function(e){
    switch (e.keyCode) {
        case 40:    // down
            n = $('.screen-wrapper').next()
            $.scrollTo( n, 800 );
          break;
        case 38:    // up

          break;
        case 37:    // left

          break;
        case 39:    // right

          break;

    }      
});

如果有帮助，这里是HTML div。我在页面上有一些这些，基本上，我试图通过按下箭头滚动到下一个：

And if it helps, here's the HTML div. I have a few of these on the page, and essentially, am trying to scroll to next one by pressing down arrow:

<div class='screen-wrapper'>
<div class='screen'>
    <div class="sections">
        <ul>
            <li><img src="images/portfolio/sushii-1.png " /></li>
            <li><img src="images/portfolio/sushii-2.png" /></li>
            <li><img src="images/portfolio/sushii-3.png" /></li>
        </ul>
    </div>

    <div class="next"></div>
    <div class="prev"></div>
</div> 

如果需要，我可以提供一个链接，如果它有帮助的话有人会有更好的主意。

And also if it needed, I can provide a link where this is being used if it'll help someone get a better idea.

编辑
而且，我忘了提到这里真正的问题是什么。
问题/问题是它不会向下滚过第一个元素，如 seth 所述。

推荐答案

这里没有真正的问题，但我猜测问题是你的页面没有滚过第一个页面。这是因为你在每次按键时调用它：

There's no real question here but I'm going to guess the problem is that your page doesn't scroll past the first one. It's because you call this on every keypress:

            n = $('.screen-wrapper').next()

每次调用它时，它可能会返回相同的一个。尝试在按键外移动实例化。

It's probably returning the same one every single time you call it. Try moving the instantiation outside of the keypress.

          var s = $('.screen');
          var curr=-1, node;

          $(document).keypress(function(e){
             switch( e.keyCode ) {
               case 40:
                  node = s[++curr];
                  if (node) {
                    $.scrollTo( node,800);
                  }
                  else {
                    curr = s.length-1;
                  }
                  break;
                case 38:
                   node = s[--curr];
                   if (node) {
                     $.scrollTo( node ,800);
                   }
                   else {
                      curr = 0;
                    }
                   break;
                }
          });

这篇关于通过按键和按键向下滚动到下一个元素scrollTo插件 - jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！