1

ユーザーが値を選択できるドロップダウン メニューがあります。現在、各オプションがテーブル内にあるテーブルで生成されます。要素を使用する方が良いことはわかっていますが、この時点で要素を変更するには多くの作業が必要になります。

ドロップダウン メニューには 6 行が表示され、"overflow: scroll" を使用して、ユーザーが下にスクロールして残りのオプションを表示できるようにします。

現在、ユーザーがドロップダウンを選択すると、スクロール バーは常に一番上から始まり、それらの行の 1 つを選択する場合は、リストの一番下までスクロールする必要があります。

私が欲しいのは、スクロールバーを以前に選択した要素から開始する方法です。ユーザーが以前に選択した行番号を知っており、それを使用して、ロード時にスクロールバーを下に移動する必要があるピクセル数を計算できます。

特定の 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プロパティが必要だと思います。

もう 1 つのアイデアは、それぞれに 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 に答える