Make overflow: caché pour ne pas faire défiler

J'ai un ensemble de boutons radio à l'intérieur d'un div qui a une hauteur fixe et débordement: caché. Certaines radios sont cachées car elles seraient naturellement positionnées en dehors de la hauteur du div contenant.Make overflow: caché pour ne pas faire défiler

Lorsqu'une radio est sélectionnée et que la radio est en dehors de la partie visible de la div, la div est défilée.

Ce que je veux, c'est pouvoir verrouiller le défilement de la div, peu importe si la radio actuellement vérifiée est visible ou non. Je ne veux pas que la div défile.

Instructions pour reproduire:

FF/IE:

Cliquez sur un bouton radio
Utilisez flèches haut/bas

Voici le code: 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>

Source

2010-10-20 DanC

Je ne vois pas le défilement, je ne vois que les 5 premiers boutons radio, et je ne peux sélectionner ces 5. – netadictos

Êtes-vous en cliquant sur une radio et en utilisant les flèches haut/bas pour changer la sélection à une autre radio? – DanC

est la réponse fournie ce que vous cherchez? –

C'est en effet une demande très étrange que vous avez ici. Je n'ai absolument aucune idée de ce que vous essayez d'accomplir ici. Cependant, voici votre solution:

Firefox fait défiler l'élément sélectionné dans la vue, c'est juste un comportement de construction. Il n'y a pas de spécification ou d'attribut magique pour ça ou quelque chose. Cependant, vous pouvez faire un petit hack que j'ai fait dans l'exemple ci-dessous:

Vous pouvez jouer avec des événements onkeydown ou onfocus et réinitialiser le scrol en javascript, mais ce serait un non-sens. Placez simplement les éléments que vous ne voulez pas faire défiler dans la zone visible. Je l'ai fait en haut à droite. Ensuite, faites-en la visibilité: hidden et voilá. Il sera sélectionné sur la flèche vers le bas et la valeur etc sera toujours submittet (je l'ai essayé avec emballage d'une étiquette de forme manquante autour de l'ensemble et un bouton de soumission).

C'est très moche et à ma connaissance absolument bizarre et stupide, mais comme je l'ai dit je ne sais pas quels sont vos objectifs!

Voici vient votre code mis à jour:

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

Source

2010-10-20 18:07:06

Merci pour votre réponse, même dans le cas où vous pensez que c'est laide et stupide, mais, comme vous l'avez peut-être deviné, cela fait partie d'un plus grand contrôle dans lequel je vais faire bouger les choses. Le fait que le navigateur défile automatiquement la div est en train de casser le positionnement de l'interface utilisateur. – DanC

Avec cette solution telle qu'elle est maintenant, j'ai du mal à sélectionner les boutons radio qui ont la classe invisible. Pensez-vous qu'il serait possible de les avoir quelque peu cachés, mais toujours être sélectionné lorsque vous utilisez les touches haut/bas? (Même si elles ne sont pas visibles?). Et oui, d'où cela vient n'est pas si laide et stupide .... – DanC

ils sont sélectionnés. J'ai enveloppé le tout dans un formulaire, mettre une valeur différente dans les boutons avec la classe invisible, les sélectionnés par le curseur et Submittet. –

Make overflow: caché pour ne pas faire défiler

Répondre

Questions connexes