Question

我在div中有一组单选按钮，它有一个固定的高度和溢出：隐藏。一些无线电被隐藏起来，因为它们会自然地位于包含div的高度之外。

当选择了收音机，并且该收音机位于div的可见部分之外时，div会滚动。

我想要的是能够锁定div的滚动，无论当前检查的无线电是否可见。我不希望div滚动。

重现说明：

在FF / IE中：

点击单选按钮
使用向上/向下箭头

以下是代码：http://www.jsfiddle.net/kANKu/1/

<div style="width:200px; height:100px; border: solid 1px red; margin:0 auto;overflow:hidden;">

<input type="radio" name="rad1"  value="hello" id="hello1" /><label for="hello1">hello1</label> <br />
<input type="radio" name="rad1"  value="hello" id="hello2" /><label for="hello2">hello2</label> <br />
<input type="radio" name="rad1"  value="hello" id="hello3" /><label for="hello3">hello3</label> <br />
<input type="radio" name="rad1"  value="hello" id="hello4" /><label for="hello4">hello4</label> <br />
<input type="radio" name="rad1"  value="hello" id="hello5" /><label for="hello5">hello5</label> <br />
<input type="radio" name="rad1"  value="hello" id="hello6" /><label for="hello6">hello6</label> <br />
<input type="radio" name="rad1"  value="hello" id="hello7" /><label for="hello7">hello7</label> <br />
<input type="radio" name="rad1"  value="hello" id="hello8" /><label for="hello8">hello8</label> <br />
<input type="radio" name="rad1"  value="hello" id="hello9" /><label for="hello9">hello9</label> <br />

</div>

Answer 1

这确实是你在这里的一个非常奇怪的要求。我完全不知道你要在这里完成什么。不过这是您的解决方案：

Firefox将所选项目滚动到视图中，这只是一种内置行为。这个或那个没有规范或魔术属性。但是你可以做一些我在下面的例子中做过的黑客攻击：

你可以玩onkeydown事件或onfocus并重置javascript中的滚动但这是无稽之谈。只需将您不想滚动的元素放在可见区域内。我是在右上角做的。然后让它可见：hiddenetvoilá。它将在向下箭头处被选中，值等仍然会被提交（我尝试将整个事物和提交按钮包裹一个缺失的表格标签）。

这是非常丑陋的，在我的理解中绝对奇怪和愚蠢，但正如我所说，我不知道你的目标是什么！

这是您的更新代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Title of the document</title>
        <style type="text/css">
            #strangediv {
            position: relative;

            }

            #strangediv input.invisible {
            top: 0px;
            left: 0px;
            position: absolute;
            visibility: hidden;
            }
        </style>
    </head>
    <body>

        Try this in FF/IE

        <div id="strangediv" style="width:200px; height:100px; border: solid 1px red; margin:0 auto;overflow:hidden;">
            <div id="holder">
                <input type="radio" name="rad1"  value="hello" id="hello1" /><label for="hello1">hello1</label> <br />
                <input type="radio" name="rad1"  value="hello" id="hello2" /><label for="hello2">hello2</label> <br />
                <input type="radio" name="rad1"  value="hello" id="hello3" /><label for="hello3">hello3</label> <br />
                <input type="radio" name="rad1"  value="hello" id="hello4" /><label for="hello4">hello4</label> <br />
                <input type="radio" name="rad1"  value="hello" id="hello5" /><label for="hello5">hello5</label> <br />
                <input type="radio" name="rad1"  value="hello" id="hello6" class="invisible" /><label for="hello6">hello6</label> <br />
                <input type="radio" name="rad1"  value="hello" id="hello7" class="invisible" /><label for="hello7">hello7</label> <br />
                <input type="radio" name="rad1"  value="hello" id="hello8" class="invisible" /><label for="hello8">hello8</label> <br />
                <input type="radio" name="rad1"  value="hello" id="hello9" class="invisible" /><label for="hello9">hello9</label> <br />
            </div>
        </div>

    </body>
</html>

使溢出：隐藏不滚动

1 个答案: