Discussion :

[patdu26]

bonjour à tous,

j'ai sur mon body, une div, "flex-direction column", qui ressemble à ca :


tant que je ne provoque pas un défilement vertical du body, en restant sur les deux premiers items, et que je clique, je construis et fais apparaitre une div en haut à gauche par un bout de code appelé. Cela créé une div d'aspect similaire, mais de contenu différent pour les différents items proposés verticalement.

Mais quand je veux atteindre les items plus bas, je provoque donc un scrooling vertical var le haut, et quand je clique pour créer la div nouvelle de contenu, elle se positionne à la même hauteur sur mon body que les précédentes, mais comme le haut du body est monté hors de l'écran, on ne voit que le bas de la div construite. Certes, je peux scrooller vers le bas pour la retrouver entière à l'écran, mais j'aimerais qu'elle apparaisse directement en haut à gauche de la partie visible de mon écran..

Est-ce qu'il y a moyen d’accéder directement ou indirectement, aux coordonnées du point supérieur gauche de ma fenêtre de visualisation, par rapport au coin supérieur gauche de mon body, afin de corriger cela par un bout de code??

Merci.

[CosmoKnacki]

C'est plutôt un problème de CSS. Recherche sur la propriété position pour les valeurs fixed ou sticky.

un bout de code??

Ouais, ce serait bien.

[patdu26]

C'est plutôt un problème de CSS. Recherche sur la propriété position pour les valeurs fixed ou sticky.


Ouais, ce serait bien.

l'idée est la suivante:
quand je clique sur un des items en gris/vert affiché sur la page d'accueil, j'appelle une fonction qui construit une div me proposant les documents correspondants.
Sur un grand écran, type PC, pas de problème, car mon "support" qui présente les documents voulus rentre entièrement dans la surface visible du document.

Sur un petit écran, par exemple smartphone, je construis une div "Support" redimensionnée, pour un petit écran, mais qui peut ne pas entrer en totalité en hauteur. C'est là que le problème survient.

en effet :

si je construis mon support avec positionnement "fixed", le bon coté, c'est qui est placé nickel au bon endroit sur mon document, au coin supérieur gauche sous la div bleue :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
// div conteneur principal SUPPORT
       var  support = document.createElement("div");
            // style
            support.style.position = "fixed";
 
             support.style.minHeight = screen.availHeight - y0 + "px";
            support.style.top = y0 +"px";
            support.style.left = 0; 
            support.style.zIndex = "15";
 
            support.style.width= screen.availWidth + "px"; // taille du support pour écran < 1000

Le support est très bien si l'écran du média l'affiche en totalité :


Si l'écran du smartphone est petit, le support est tronqué.


Le point positif est que le support est toujours placé au bond endroit, car "fixed" cale les coordonnées sur le viewport, et donc, à la même position visuelle, même si le document s'est décalé verticalement.
Le point négatif est qu'il est impossible de bouger ou srooler pour voir le bas du support tronqué...

Si je mets une position "absolute", le positionnement se cale sur le document, et donc, tout est nickel tant que je ne déplace pas les items à cliquer sur la page d'accueil, en voulant atteindre un qui est en bas de l'écran d'acceuil, ce qui ferait déplacer le document verticalement, et par la même, déplacer le postionnement vertical du support qui sera construit. Donc, dans cette option, c'est le haut du support qui sera caché, car trop haut, mais on pourra scrooler....

La question est la suivante :

Comment avoir à la fois, un support dont le haut apparait en totalité, et qu'on peut scroller pour faire apparaitre le bas quand il est trop grand pour etre affiché en totalité.

(j'ai essayé les "overflow : scroll, hidden.... rien n'y fait)

Bravo à ceux qui ont tout lu, grand BRAVO à ceux qui comprendront ma problématique, et merci à ceux qui s'y pencheront éventuellement...

[patdu26]

bonjour à tous, (si jamais quelqu'un suit ma petite chronique.)

Après de nouvelles recherches, je viens de trouver une solution pour ma problématique.

En effet, la méthode "getBoundingClientRect()" met à notre disposition, le décalage de position d'un élément html, entre les coordonnées par rapport au document, et celles par rapport à la fenêtre du viewport.

J'ai donc mis ma div en postionnement "absolute", ce qui me permet de la faire monter et descendre pour voir tout le contenu si elle est plus grande que la fenêtre visible, et de plus, connaissant le décalage des coordonnées document/fenetre,
je peux la positionner comme je veux à l'affichage....

En espérant que ma démarche pourra rendre service à d'autres....