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 将元素（可能是 -999em 或类似的）隐藏在 "top" 属性，在这种情况下position:relative 没有任何关系，因为总是 -999em 会比 viewport 高得多。

接受的答案很好，因为“顶部”只有 -20px 。尝试将其设置为更高的数字，您会发现问题。

因此，解决方案是不设置相对位置。我认为正确的方法是只在左侧（不是顶部）设置一个负值。

尝试一下。:)

于 2013-09-12T12:52:07.667 回答
7

你可以像这样隐藏你的复选框输入：

#ck-button label input {
    position:absolute;
    top:+20px;
    visibility: hidden;
}
于 2013-07-31T15:39:55.990 回答