14

チェックボックスをクリックするたびに、ブラウザ ウィンドウ (firefox) が画面の上部にスクロールします。
チェックボックスをクリックしたときにブラウザウィンドウが一番上にスクロールしないようにするには、どうすればこの動作を防ぐことができますか?
ここから見つかったコードは次のとおりですhttp://jsfiddle.net/zAFND/6/
ありがとうございます。

<html>
    <head>
        <title>Test</title>
        <style>
            div label input {
                margin-right: 100px;
            }

            body {
                font-family:sans-serif;
            }

            #ck-button {
                margin: 4px;
                background-color: #EFEFEF;
                border-radius: 4px;
                border: 1px solid #D0D0D0;
                overflow: auto;
                float: left;
            }

            #ck-button {
                margin: 4px;
                background-color: #EFEFEF;
                border-radius: 4px;
                border: 1px solid #D0D0D0;
                overflow: auto;
                float: left;
            }

            #ck-button:hover {
                margin: 4px;
                background-color: #EFEFEF;
                border-radius: 4px;
                border: 1px solid red;
                overflow: auto;
                float: left;
                color: red;
            }

            #ck-button label {
                float: left;
                width: 4.0em;
            }

            #ck-button label span {
                text-align: center;
                padding: 3px 0px;
                display: block;
            }

            #ck-button label input {
                position: absolute;
                top: -20px;
            }

            #ck-button input:checked + span {
                background-color: #911;
                color: #fff;
            }
        </style>    
</head>
    <body>
        <br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <div id="ck-button">
            <label>
                <input type="checkbox" value="1"><span>red</span>
            </label>
        </div>
    </body>
4

3 に答える 3

49

問題は次のルールです。

#ck-button label input {
  position:absolute;
  top:-20px;
}

ラベルをクリックすると、ブラウザは関連する入力にフォーカスしようとします。あなたの場合、チェックボックス要素はビューポートの外でもページの上部にあるため、Firefox はそこをスクロールしようとします。

次を追加することで、このように解決できます。

#ck-button label {
  display: block;
  position: relative;
  overflow: hidden;
}

デモ

購入前にお試しください

別

ハイゼンベルグは、極端な値を使用したときに発生する可能性がある彼の回答の問題を指摘しています。残念ながら、提案されたアイデアには、上に示したものと同じ癖があります。

したがって、別の解決策は、単に入力を非表示にすることです。機能に影響はありません。

CSS

#ck-button label input {
  display: none;
}

デモ

購入前にお試しください

于 2013-07-31T15:18:30.140 に答える
18

受け入れられた答えは完全に真実ではありません。動作しますが、すべての場合ではありません。

一般的な css を使用して "top" 属性で要素 (おそらく -999em など) を非表示にする場合、この場合position:relative は何もしません。常に -999em が viewport よりもはるかに高くなるためです。

「トップ」は -20px のみであるため、受け入れられた回答は正常に機能します。より高い数値に設定してみると、問題が発生します。

したがって、解決策は相対位置を設定しないことです。正しい方法は、左の位置（上ではない）に負の値を設定することだけだと思います。

それを試してみてください。:)

于 2013-09-12T12:52:07.667 に答える