Question

我有一个div溢出，就像一个列表（因为真正的＆＃34;选择＆＃34;在自定义并在所有浏览器中保持这种方式时，这是一个痛苦的屁股）。

问题是，列表很长，我希望当页面加载＆＃34;选择＆＃34;列表的元素或多或少位于div的中间，例如将selected=selected放入option中的select。

这是Fiddle

提前致谢。

Answer 1

您可以使用锚点：

为您的某个列表项提供特定ID（例如：“anchor”）
当您链接到此页面时，将主题标签#anchor添加到网址，您的列表将被刻录到具有相应ID的列表项。

示例网址：www.yourpage.com/list应该变为www.yourpage.com/list#anchor

DEMO 会告诉您。

<li id="anchor"><span>12 years</span> ... </li>

<a href="#anchor">anchor link</a>

editable fiddle

Answer 2

如果使用jQuery，可以使“select”容器滚动到特定元素。在这种情况下，我将 .select 类添加到随机 li 中，以显示其工作原理。

然后，您可以在 #wraptable 容器上按 .selected 元素根据其父元素的像素数进行滚动。

$(function(){   
    var offsetSelectedElement = $(".selected").position().top;
    $("#wraptable").scrollTop(offsetSelectedElement);
});

DEMO

修改

要添加jQuery，请在页面的 head 部分添加库：

<html> <head> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </head> ... </html>

如果您不想使用jQuery，您仍然可以通过纯JavaScript实现相同的结果，但它的代码更多：

var offsetSelectedElement = document.getElementsByClassName("selectedItem")[0]; var wrappable = document.getElementById("wraptable"); wrappable.scrollTop = offsetSelectedElement.offsetTop;

DEMO

Answer 3

如果你只是想把卷轴放到中间，也许你可以试试这个js：

 document.getElementById('wraptable').scrollTop = document.getElementById('wraptable').scrollHeight / 2;

将#wraptable滚动到中间。

<强> FIDDLE DEMO

滚动到溢出div中的特定元素

3 个答案: