javascript - 如何使用 HTML/CSS/JavaScript 在一个元素上垂直对齐列表？

Question

我有一个包含很长列表的 HTML 文档，如下所示:

<ol>
    <li>frog</li>
    <li>fish</li>
    <li>flamingo</li>
    <li>ferret</li>
    <li><div class="marked">fox</div></li>
    ...
</ol>

列表太长，无法在屏幕上显示所有元素。我用 div class="marked"> 标记了一项和 </div> .有什么方法可以使列表垂直居中在该标记的元素上。

• 如果列表太长，它应该超出可见屏幕的边缘，不创建滚动条。

这是它在浏览器窗口中的显示方式示例:

 __________________
|   2.fish         |
|   3.flamingo     |
|   4.ferret       | <-- This marked item is centered.
|   5.elephant     |
|___6.mouse________| <-- No scrollbars.

如何在营销商品上垂直对齐列表？

Answer 1

这是一个基于 James G. 代码的解决方案，它通过使用 getBoundingClientRect() 避免了循环:

http://jsfiddle.net/d8d5jjvc/4/

var list = document.getElementById('list'),
    marked= document.getElementById('marked'),
    crm= marked.getBoundingClientRect(),
    height= crm.bottom-crm.top;

list.scrollTop= (crm.top-height)-(list.clientHeight-height)/2;