11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Rendre un élément visible dans un bloc

Bonjour à tous
Soit le code HTML suivant:

<div>
    <ul>
        <li>........</li>
        <li>........</li>
        ........
    </ul>
</div>

La liste des <li> contient environ 300 lignes.
La balise <div> enveloppant le tout est en overflow-y:auto; il n'y a donc qu'une vingtaine de lignes visibles à un moment donné.
Sur certaine évènements concernant une ligne non affichée à l'écran, je voudrais effectuer en JS un scroll vertical dans la <div> pour que cette ligne devienne visible.
Quelle est la façon la plus simple de faire cela?

Merci de vos conseils
Bonjour,

j'ai du mal à comprendre.

Les <li> sont justes des lignes, donc 1 ligne, c'est bien ça ?

Donc lorsque je scroll à une ligne x qui sera forcément visible, toute la <div> sera visible. C'est bien ça ?
bzh a écrit :
Avec les ancres je dirai. En jQuery, tu as scrollTop() par exemple.

Après quelques essais, j'ai laissé tomber jQuery: ajouter un package extérieur, apprendre à s'en servir... tout cela pour ne pas faire moi-même en JS ce que jQuery fait en JS... Je n'ai plus assez de temps à vivre pour me faire ce changement de techno. Tant qu'à faire, autant essayer de mettre en œuvre les nouveautés de JS.
Je peux toujours calculer en JS la position de ma ligne et faire le scrollBy qui va bien. C'est pas génial, mais s'il n'y a rien de mieux...
Modérateur
Alors la façon la plus simple, c'est jquery.scrollTo:


$(element).scrollTo(target);


Sans scripts cela consiste à se servir de element.scrollTop, de calculer la position du li par rapport à la div, de faire un peu des additions avec la hauteur de la div.
allan00958 a écrit :
Bonjour,
j'ai du mal à comprendre.
Les <li> sont justes des lignes, donc 1 ligne, c'est bien ça ?

En fait c'est un "arbre" avec des <ul> imbriqués dans les <li>, mais effectivment la structure d'un <li> c'est

<li><h3>texte</h3>
    <ul>
       <li><h3>texte</h3>
       ....

Il y a un seul (petit) texte dans les <h3>, donc en pratique c'est bien un <li> par ligne affichée.
allan00958 a écrit :
Donc lorsque je scroll à une ligne x qui sera forcément visible, toute la <div> sera visible. C'est bien ça ?

La <div> est toujours visible en entier, mais c'est son contenu qui scrolle.
Si je scrolle la liste pour que la ligne x soit visible, le haut de la liste ne sera plus visible, mais ça ne change rien à la <div>
kustolovic a écrit :
ERRATUM:

la solution la plus simple c'est les ancres:

https://codepen.io/anon/pen/BdgPZb

ça a l'air d'être ça, mais je ne comprends pas très bien comment mettre ça en musique.
Je ne vais pas mettre 300 <a> et faire cliquer dessus, bien entendu! Smiley biggol
Je peux mettre un id dans chaque ligne, ne serait-ce que id="lignex".
Que doit faire le programme pour "aller à" lignex?
Modérateur
On peut obtenir le même résultat en javascript en changeant le hash:

window.location.hash = 'pipou';

Après ça requiert des ID truc1, truc2, truc3, etc.
Salut Papy Smiley smile

Si je comprend bien tu as cette liste qui est en fait un "menu" et selon une action effectuée ailleurs dans le html tu voudrais que la div se cale sur le bon Smiley smile

alors si j'ai bien compris :
- tu dois définir un id en temps qu'ancre pour chacun de tes LI que tu veux pouvoir pointer
- ailleurs selon les actions il suffit de rester sur la page et d'envoyer #mon_id_de_li

exemple
dans ma div j'ai quelque part <li id="toto">TOTO</li>

ailleurs dans ma page html j'ai ceci <a href="#toto">aler à toto</a>

c'est suffisant pour faire ce que tu veux faire Smiley cligne


@ bientôt papy Smiley lol
PapyJP a écrit :

Après quelques essais, j'ai laissé tomber jQuery: ajouter un package extérieur, apprendre à s'en servir... tout cela pour ne pas faire moi-même en JS ce que jQuery fait en JS... Je n'ai plus assez de temps à vivre pour me faire ce changement de techno. Tant qu'à faire, autant essayer de mettre en œuvre les nouveautés de JS.
Je peux toujours calculer en JS la position de ma ligne et faire le scrollBy qui va bien. C'est pas génial, mais s'il n'y a rien de mieux...

Tout l'intérêt d'une bibliothèque c'est justement de ne pas avoir à coder soi-même ce qui n'est pas supporté nativement. Je crois que tu surestimes grandement le temps d'apprentissage d'un telle lib mais je suppose que ce n'est pas la vraie raison.

PapyJP a écrit :
ça a l'air d'être ça, mais je ne comprends pas très bien comment mettre ça en musique.
Je ne vais pas mettre 300 <a> et faire cliquer dessus, bien entendu! Smiley biggol
Je peux mettre un id dans chaque ligne, ne serait-ce que id="lignex".
Que doit faire le programme pour "aller à" lignex?


Fais un input, select, un curseur ou une pagination selon ce qui te parait le plus adapté.
bzh a écrit :

Tout l'intérêt d'une bibliothèque c'est justement de ne pas avoir à coder soi-même ce qui n'est pas supporté nativement. Je crois que tu surestimes grandement le temps d'apprentissage d'un telle lib mais je suppose que ce n'est pas la vraie raison.

Ou bien les choses sont directement faisables en JS, ou bien je me fais moi-même mes propres outils pour les faire.
Pour ce que j'en ai à faire, c'est tout à fait suffisant.
Il en est évidemment différemment pour des gens dont le boulot consiste à faire du travail pour des clients. Dans ce cas, "faire plus en écrivant moins" est effectivement un plus appréciable.
J'ai utilisé la solution de Kustolovic, ça marche très bien.
Merci pour cette solution
Ajouter un id à chaque <li> n'est pas un problème, car comme de bien entendu de telles structures ne sont pas écrites "à la main" mais par manipulation du DOM à partir d'une requête AJAX.

J'avais essayé de calculer les distances et de faire un scrollTop += increment, mais je n'y suis pas arrivé.
Tout petit problème: cette solution fait que dans la barre de navigation ça affiche
URL du fichier suivi de #id
ce qui se comprend aisément.
Un moyen pour éviter cet effet de bord?
PapyJP a écrit :
Tout petit problème: cette solution fait que dans la barre de navigation ça affiche
URL du fichier suivi de #id
ce qui se comprend aisément.
Un moyen pour éviter cet effet de bord?


Qu'utilises-tu comme balise pour déclencher l'action, une balise <a href=""> ?
Si jamais c'est le cas, que tu n'as que des <a href=""> et que leur utilité est uniquement de t'amener dans le <li> voulu, alors je te propose une autre solution :

Mettre en place un autre type de balise, genre <span> à la place de tes <a>, avec un event onClick() à l'intérieur (rajoutons un cursor:pointer pour faire plus jolie). Dans ce onClick on aurait un appel de fonction, par exemple "goTo()" avec un argument en entrée => le fameux ID du <li>
exemple : 
<span onClick="goTo('liCible')">Go</span>


Ensuite la fonction javascript 
function gogoToid)
{
	document.getElementById(id).scrollIntoView(true);
}

Au moins tu aura le scroll, sans pour autant que cela soit visible dans l'url..
Meilleure solution
Non ce n'est pas une série de 300 <a>
Le script génère chaque <li> sous la forme

<li id="bidule">...</li>

et lorsque le script vaut être sûr que le <li> est bien visible, le code est
window.location.hash = "bidule";

ça fait exactement ce que je veux, et -- encore une fois ce n'est pas grave -- ça affiche dans la barres de navigation
url-du-fichier#bidule
Je voulais savoir si on pouvait trouver un moyen de ne pas afficher ça.
Je vais essayer "scrollIntoView", une méthode que je ne connaissais pas.
Merci de ta réponse
Oui! ça marche!
Merci, c'est exactement ce que je cherchais depuis ce matin!
Modifié par PapyJP (08 Sep 2017 - 17:54)
Sujet clos
Aller à