Je me demande comment accéder aux éléments débordants. Je voudrais copier leur contenu dans un autre div ou quelque chose. Disons que j'ai obtenu un ul avec 5 éléments li, mais seulement deux sont visibles. Alors .. Comment puis-je obtenir d'autres 3 éléments dans un autre div?Eléments cachés de débordement
Vous devez calculer si quelque chose est visible ou non et pour cela vous devez faire des suppositions. Voici un exemple simple de ceci. Il suppose que la liste est une liste traditionnelle (en ce sens que chaque élément est inférieur à la suivante). Il utilise ensuite un calcul pour déterminer si le offsetTop est supérieur à la hauteur du conteneur. Vous pouvez adapter ceci pour voir si quelque chose est partiellement visible ou complètement visible.
return this.offsetTop + $(this).height() > height;
signifie appliquer l'effet si l'élément n'est pas entièrement visible. Pour déplacer pas les éléments qui sont partiellement changement visible à:
return this.offsetTop > height;
Exemple complet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var height = $("#container").height();
$("#container li").filter(function() {
return this.offsetTop + $(this).height() > height;
}).wrapAll("<ul>").parent().appendTo("#overflow");
});
</script>
<style type="text/css">
div, ul, li { border: 0 none; padding: 0; margin: 0; }
#container { background: yellow; margin-bottom: 20px; height: 50px; overflow: hidden; }
#overflow { background: #CCC; }
</style>
</head>
<body>
<div id="container">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</div>
<div id="overflow">
</div>
</body>
</html>
Une solution plus générale serait beaucoup plus fastidieux. Vous devez prendre en compte les éléments qui sont à gauche, à droite, au-dessus ou en dessous de la "fenêtre d'affichage".