制作溢出：隐藏不滚动

我有一组具有固定的高度和溢出一个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>

来源

2010-10-20 DanC

我没有看到滚动，我只看到了前5个单选按钮，而我只能选择其中5 – netadictos 2010-10-20 16:23:41

你点击一个电台和使用向上/向下箭头将选择更改为另一个收音机？ – DanC 2010-10-20 17:27:42

是你提供的答案你在找什么？ – 2010-10-21 08:36:18

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

火狐滚动选定项目进入视野，在行为那只是一个构建。没有任何规范或魔术属性的东西。然而，你可以做一些小技巧，我在下面的例子中做了：

你可以玩onkeydown事件或onfocus和重置JavaScript的滚动，但这将是胡说八道。只需将不想滚动的元素放置在可见区域内即可。我在右上角做了。然后让它可见：hidden etvoilá。它会被选中的箭头向下和价值等将仍然submittet（我试了一遍，包裹一个缺少的表单标签，整个事情和提交按钮）。

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

这里说到你的更新代码：

<!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>

来源

2010-10-20 18:07:06

感谢您的回答，即使在您认为这是丑陋和愚蠢的情况下，但是，正如您可能已经猜到的那样，这是更大控制的一部分，我将在其中进行移动。浏览器自动滚动div的事实打破了事物的UI定位。 – DanC 2010-10-21 13:25:08

现在使用此解决方案时，我无法选择具有不可见类的单选按钮。你是否认为可以隐藏它们，但在使用上/下键时仍然可以选择它们（即使它们不可见？）。是的，从这里来的不是那么丑陋和愚蠢...... – DanC 2010-10-21 13:27:27

他们被选中。我把整个东西包装成一个表单，在不可见类的按钮中放入一个不同的值，用光标和submittet选择它们。 – 2010-10-21 19:17:40

制作溢出：隐藏不滚动

回答

相关问题