1

我有一个下拉菜单，用户可以从中选择值。它目前是用一个表生成的，其中每个选项都是表中的一个。我知道使用元素会更好，但此时更改为需要大量工作。

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

目前，当用户选择下拉菜单时，滚动条总是从顶部开始，如果他们想选择其中一行，他们必须向下滚动到列表的底部。

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

具体的 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，并以某种方式显示元素。

谢谢！

4

1 回答 1

1

恐怕你不能用纯 CSS 来实现。请检查：在没有 javascript 的情况下设置 scrollTop 和 scrollLeft。

你可以用 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/ 。

希望能帮助到你。

于 2013-10-18T19:09:50.527 回答