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到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 } );

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

1 个答案: