navigation
Si je redimensionne la page, les éléments débordent au-dessus de la fenêtre et je ne peux pas faire défiler vers le haut pour les voir. J'ai trouvé une question avec une solution mais cela n'a pas fonctionné. J'ai deux divs invisibles "de base" et un élément div qui contient tout le contenu.
Le div "conteneur" existe parce que j'essaie de résoudre ce problème.
.container { poste : fixe ; haut : 0 ; gauche : 0 ; largeur : 100 % ; hauteur : 100 % ; indice z : 500 ; } .contenu principal { affichage : flexible ; largeur : 100 % ; hauteur : 100 % ; débordement : automatique ; marge : auto ; } .fenêtre { /*hauteur : 16vw; largeur : 27vw;*/ affichage : flexible ; hauteur : 550 px ; largeur : 800 px ; position : absolue ; haut : 50 % ; gauche : 50 % ; bordure : bleu uni 5 px ; couleur de fond : noir ; marge : auto ; débordement caché; } 
navigation
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Pour ce problème, je pense que la seule solution est de créer une barre de défilement personnalisée (si vous devez placer l'image au-dessus de la fenêtre)
C'est le code que j'ai créé à partir de votre code
EXPLICATION
En gros, j'ai créé une barre de défilement en utilisant HTML et CSS et je l'ai placée à l'extrême droite de l'image
J'espère que HTML et CSS pourront être compris Jetons maintenant un œil à la partie JavaScript
Tout d'abord, nous cartographions les coordonnées de la souris
const mouse = {} document.addEventListener('mousemove', (e) => { mouse.x = e.clientX; mouse.y = e.clientY; })Nous créons des écouteurs d'événements qui appellent des fonctions ou modifient la variable d'arrêt du glissement
let stopDrag = false; document.getElementsByClassName('scrollbar')[0].addEventListener('mousedown', startDrag) document.getElementsByClassName('drag')[0].addEventListener('mousedown',startDrag) document.addEventListener('mouseup', () => { stopDrag = true; })Ensuite, nous créons la fonction startDrag()
function startDrag() { stopDrag = false; let interval = setInterval(() => { if(mouse.y+180 > 495) { document.getElementsByClassName('drag')[0].style.top ="495px"; } else if(mouse.y+180 <217) { document.getElementsByClassName('drag')[0].style.top ="0px"; } else { document.getElementsByClassName('drag')[0].style.top = mouse.y+(180 + ((Number(document.getElementsByClassName('drag')[0].style.top.split("p")[0]) -760)/3.5)); } document.getElementsByClassName('window')[0].style.bottom = (Number(document.getElementsByClassName('drag')[0].style.top.split("p")[0]) -760) + "px" if(stopDrag) { clearInterval(interval) } }) }Dans cette fonction, nous définissons d'abord stopdrag sur false car l'utilisateur fait actuellement glisser la barre de défilement Ensuite, nous mettons en place un code de boucle d'intervalle Selon les coordonnées, mouse.y est principalement constitué d'essais et d'erreurs. Nous vérifions si c'est dans les limites et si c'est le cas nous déménageons Ensuite, on change la position haute de la barre de défilement en faisant glisser (le calcul est un essai et une erreur) Ensuite, nous modifions la position inférieure de la classe de fenêtre div pour repositionner la classe de fenêtre div (car l'image elle-même ne peut pas être repositionnée ; si vous ne voulez pas que toute la classe de fenêtre div se déplace, vous pouvez créer un autre conteneur par-dessus) pour le voir Si le glissement s'arrête, nous effaçons l'intervalle
Merci à @TylerH d'avoir résolu ce problème. Le problème vient du style de transformation dans mon HTML. Après l'avoir supprimé, il défile correctement. D'après ce que j'ai vu, cela semble compenser le défilement et déplacer la page entière au lieu de seulement les éléments. Merci pour l'aide de tous, mais j'ai compris.