如果没有CSS位置或margin-top,<li>项目如何上下移动?</li>

时间:2013-05-08 22:59:54

标签: javascript html css

我正在查看页面http://store.apple.com/us/configure/MD231LL/A的CSS?如果我们在“查看更多商店”的“可供取件”下单击右侧,则会出现一个叠加层,供我们输入邮政编码,然后输入94112,然后按Enter键,然后显示一个清单。

奇怪的是,当我们点击“下一步”查看商店的下一页时,我们可以检查显示的商店列表的顶行,它只是第6个<li>项目,正在转移起来。但是我没有看到任何使用position: absoluteposition: relativetop集合的机制,甚至是margin-top: -800px之类的机制。所以20 <li>的整个列表都在那里,但是当点击Next或Prev按钮时,<li>项可以通过什么机制在<ul>内向上和向下移动?

更新:我发现scrollTop实际上已更改...但没有滚动条,因此当没有滚动条时可以使用scrollTop,在开发过程中,scrollTop不容易与其他CSS风格混淆吗?实际上,使用CSS vs scrollTop是否存在利弊?

1 个答案:

答案 0 :(得分:1)

说实话非常有趣的解决方案。您对scrollTop的看法是正确的,并且之所以没有滚动条,是因为<ul>overflow: hidden;会阻止滚动条显示。

编辑:

显然,scrollTop方法比使用绝对定位更快:http://jsperf.com/scrolltop-vs-absolute-position