javascript - 以编程方式滚动父 div 中的一组 div

Question

我有一个包含多个子 div 的父 div(请参阅此处了解我在说什么 http://garyoak.com/images/MgMenu.png)。我希望能够仅使用键盘对其进行导航，因此我一直在寻找一种在用户推过可见元素时向上或向下滚动子 div 的方法。我可以弄清楚用户何时毫无问题地完成了该操作，但我不确定如何实际向上/向下滚动内部 div。我有可用的 jquery，可以毫无问题地向其添加扩展。我知道 jquery 插件，例如可滚动和旋转木马，但我希望有一种更简单的方法来做到这一点。

html 最终看起来像这样:

    <div id="MaigcPanels" class="MagicPanels">
        <div id="MagicPanel0" class="MagicPanelSelected"><div class="Ice"><div class="MagicName">Blizzara</div><div class="MPCost">36</div></div></div>
        <div id="MagicPanel1" class="MagicPanel"><div class="Fire"><div class="MagicName">Fire</div><div class="MPCost">15</div></div></div>
        .... (rest of panel divs)
    </div>

第一个 div 将 MagicPanelSelected 作为其类，因为它是当前选定的 div。我可以保证无论我需要显示的活跃/重要的 div 总是有这个类。

就使用场景而言，我正在使用它来设计 C++ 游戏的菜单(所以几个预定义的变量被插入页面，然后通过 awesomium 呈现它们)。这就是为什么我希望在不使用鼠标的情况下执行此操作的原因。 Awesomium 基于相当新的 Chrome 版本，因此该解决方案不需要跨浏览器兼容，只要它在 Chrome 上运行即可。

我可以保证父 div 和子 div 的大小固定长度(一旦我决定了适当的长度)，但是 MagicPanel div 的数量可能会在从 0 到 0 的任何时间加载到父 MagicPanels div 120+。我有变量可以告诉我总共有多少个 div 以及每行有多少个 div。

当用户滚动经过 div 集时，我希望能够循环回到开头(通过快速滚动回到顶部，或者在底部再次循环顶部的 div)

如果它很重要，这是那些元素的 css

.MagicPanels
{
    width: 580px;
    height: 160px;
    left: 4px;
    position: relative;
    display: inline-block;
    -webkit-border-radius: 10px;
    border-radius: 10px;

    -webkit-box-shadow: 5px 5px 5px #888;
    box-shadow: 5px 5px 5px #888;
    border-width: 16px 16px 16px 16px; 
    -moz-border-image: url(MagicBorder.png) 33 32 33 34 round; 
    -webkit-border-image: url(MagicBorder.png) 33 32 33 34 round; 
    -o-border-image: url(MagicBorder.png) 33 32 33 34 round; 
    border-image: url(MagicBorder.png) 33 32 33 34 round;
    z-index: 1;
    overflow: hidden;
}

.MagicPanel
{
    width: 150px;
    height: 30px;
    margin: 0 10px 7px;
    opacity: 0.5;
    display: inline-block;
    position: relative;
}
.MagicPanelUnusable
{
    width: 150px;
    height: 30px;
    margin: 0 10px 7px;
    opacity: 0.3;
    display: inline-block;
    position: relative;
}

.MagicPanelSelected
{
    width: 150px;
    height: 30px;
    margin: 0 10px 7px;
    background-opacity: 1.0;
    display: inline-block;
    position: relative;
}

其他 CSS 类(即 Fire、Ice 等)仅定义文本的渐变/字体，对 div 的布局没有影响。

如果有人知道如何做到这一点，或者可以给我一个好的起点，我将不胜感激。

谢谢

Answer 1

您可以像这样设置任何 dom 元素的 scrollTop。我希望这可以帮助您在代码中应用逻辑。

var valueToScroll = 100;
$("selector").scrollTop(valueToScroll);

//With animation

$("selector").animate({ scrollTop: valueToScroll }, { duration: 200 } );