以编程方式滚动父div中的一组div [英] programmatically scrolling a set of divs inside a parent div
问题描述
我有一个父div，其中填充了多个子div（请参阅此处） http://garyoak.com/images/MgMenu.png ）。我想要能够用键盘导航，所以我正在寻找一种方法来滚动孩子的divs向上或向下，当用户推过可见元素。我可以弄清楚什么时候用户做到了没有问题，但我不知道如何实际上滚动内部divs上/下。我有jquery可用，可以添加扩展没有任何问题。我知道jQuery插件，如可滚动和旋转木马，但我希望有一个更简单的方法来做到这一点。
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.
html最终看起来像这样： / p>
the html ends up looking like this:
<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，我需要显示将永远有这个类。
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.
在使用场景方面，我使用这个设计C ++游戏的菜单（因此几个预定义的变量被推入页面，然后通过awesomium渲染它们）。这就是为什么我想这样做而不使用鼠标。 Awesomium基于一个相当近期的Chrome构建，所以该解决方案不需要是跨浏览器兼容，只要它在Chrome上工作。
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.
我可以保证固定长度为父div和子div的大小（一旦我决定适当的长度），但MagicPanel div的数量可以加载到父MagicPanels div在0到120+的任何一个时间范围。我有变量可以告诉我有多少div和每行有多少div。
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）
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)
如果这很重要，这些元素的css
If it's important, this is the css for those elements
.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等） / font为文本，并对div的布局没有影响。
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.
如果任何人知道如何做到这一点，或者可以给我一个很好的起点，我会欣赏它。
If anyone knows how to do this, or can give me a good starting point I'd appreciate it.
感谢
推荐答案
您可以设置任何dom元素的scrollTop喜欢这个。我希望这可能会帮助您在代码中应用逻辑。
You can set the scrollTop of any dom element like this. I hope this might help you to apply logic in your code.
var valueToScroll = 100;
$("selector").scrollTop(valueToScroll);
//With animation
$("selector").animate({ scrollTop: valueToScroll }, { duration: 200 } );
这篇关于以编程方式滚动父div中的一组div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![） http://garyoak.com/images/MgMenu.png](\"http://garyoak.com/images/MgMenu.png\"){kind=link}