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