Question

我有一个下拉菜单，用户可以从中选择值。它目前使用表生成，其中每个选项都在表中。我知道使用一个元素会更好，但是在这一点上改变它会需要很多工作。

下拉菜单显示6行，并使用“overflow：scroll”允许用户向下滚动以查看其余选项。

目前，当用户选择下拉列表时，滚动条始终从顶部开始，如果要选择其中一行，则必须向下滚动到列表的底部。

我想要的是让滚动条从他们之前选择的元素开始的方法。我知道用户之前选择的行号，并且可以使用它来计算滚动条在加载时应向下移动的像素数。

具体的HTML代码并不太重要，因为我相信这个想法可以推广到很多情况，但这就是我现在正在使用的内容：有些元素缺失，因为它们是在运行时动态生成的时间，但你应该能够了解我正在使用的内容。

<table cellspacing="0" cellpadding="2" style="width: 100%;>
    <colgroup>
    <col class="select_htc_col" style="font-size: 11px;">
</colgroup>
    <tbody>
            <tr style="height: 19px;">
            <tr style="height: 19px;">
            <tr style="height: 19px;">
            <tr style="height: 19px;">
            <tr style="height: 19px;">
            <tr style="height: 19px;">
            <tr style="height: 19px;">
            <tr style="height: 19px;">
            <tr style="height: 19px;">
            <tr style="height: 19px;">
            <tr style="height: 19px;">
            <tr style="height: 19px;">
            <tr style="height: 19px;">
            <tr style="height: 19px;">
            <tr style="height: 19px;">
            <tr style="height: 19px;">
            <tr style="height: 19px;">
            <tr style="height: 19px;">
            <tr style="height: 19px;">
            <tr style="height: 19px;">
            <tr style="height: 19px;">
    </tbody>
</table>

我觉得应该有一些CSS属性让滚动条不能从顶部开始。

另一个想法是给每个人一个ID，并用来以某种方式显示元素。

谢谢！

Answer 1

我担心你无法用纯CSS实现这一目标。请检查：set scrollTop and scrollLeft without javascript。

你可以用jQuery做它，它有一个scrollTop()函数。此函数还有一个int参数，用于指示/设置要滚动的位置。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>scrollTop demo</title>
        <style>
            p {
                margin: 10px;
                padding: 5px;
                border: 2px solid #666;
            }
        </style>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
        <p>Hello</p>
        <p></p> 
        <script>
            var p = $( "p:first" );
            $( "p:last" ).text( "scrollTop:" + p.scrollTop() );
        </script>
    </body>
</html>

取自：http://api.jquery.com/scrollTop/。

希望它有所帮助。

溢出：滚动;有没有办法默认滚动到选定的值onload？

1 个答案: