以编程方式在父div中滚动一组div

Question

我有一个父div,里面有多个子div(请参阅这里我正在谈论的内容http://garyoak.com/images/MgMenu.png).我希望能够仅使用键盘导航它,所以当用户推动可见元素时,我正在寻找一种向上或向下滚动子div的方法.我可以弄清楚用户什么时候没有问题,但我不确定如何实际上滚动内部divs up/down.我有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到120+的任何一个时间范围内加载到父MagicPanels div中.我有变量可以告诉我总共有多少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 } );