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

I have a parent div that is filled with multiple child divs (see here for what I'm talking about http://garyoak.com/images/MgMenu.png ). I'd like to be able to navigate it with keyboard only, so I was looking for a way to scroll the child divs up or down when the user pushes past the visible elements. I can figure out when the user has done that without a problem, but I'm not sure how to actually scroll the inner divs up/down. I have jquery available and can add extensions to it without a problem. I know of jquery plugins such as scrollable and carousels, however I'm hoping there is a much simpler way to do this.

我有一个包含多个子div的父div(请参阅这里的http://garyoak.com/images/MgMenu.png)。我希望能够只用键盘来导航，所以我正在寻找一种方法，当用户越过可见的元素时，可以向上或向下滚动孩子。我可以算出用户什么时候做了，没有问题，但我不确定如何实际滚动内部divs向上/向下。我有jquery可用的，可以在没有问题的情况下添加扩展。我知道jquery插件，比如scrollable和carousels，但是我希望有一种更简单的方法来实现这一点。

the html ends up looking like this:

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>

the first div has MagicPanelSelected as its class as it's the currently selected div. I can guarantee that whatever the active/important div that I need to be displaying will always have this class.

第一个div选择了MagicPanelSelected作为它的类，因为它是当前选中的div。

In terms of usage scenario, I'm using this to design menus for a C++ game (so several pre-defined variables are being pushed into the page which is then rendered them via awesomium). This is why I'm looking to do this without the use of the mouse. Awesomium is based off a fairly recent build of Chrome, so the solution does NOT need to be cross-browser compatible, as long as it works on Chrome.

在使用场景方面，我正在使用它来为c++游戏设计菜单(因此有几个预定义的变量被推到页面中，然后通过awesomium呈现)。这就是为什么我要在不使用鼠标的情况下这么做。Awesomium基于最近的Chrome版本，所以这个解决方案不需要跨浏览器兼容，只要它能在Chrome上运行。

I can guarantee fixed length for the size of the parent div and child divs (once I decide on the appropriate length), however the number of MagicPanel divs may be loaded into the parent MagicPanels div at any one time range from 0 to 120+. I have variables available to tell me how many divs total and how many divs per row there are.

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

When the user scrolls past the set of divs, I'd like to be able to loop back to the start (either by quickly scrolling back to the top, or by loop the top divs again at the bottom)

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

If it's important, this is the css for those elements

如果重要的话，这是这些元素的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;
}

The other CSS classes (i.e. Fire, Ice etc.) just define the gradients/font for the text and have no effect on the layout of the divs.

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

If anyone knows how to do this, or can give me a good starting point I'd appreciate it.

如果有人知道怎么做，或者能给我一个好的起点，我会很感激。

Thanks

谢谢

1 个解决方案

#1

You can set the scrollTop of any dom element like this. I hope this might help you to apply logic in your code.

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

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

//With animation

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

1 个解决方案

#1

更多相关文章

随机推荐