製作溢出：隱藏不滾動

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

製作溢出：隱藏不滾動

回答

相關問題