Impossible de faire défiler jusqu'à la partie de débordement de l'élément au-dessus de la page

Question

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é;
}</pré>
<pre class="brush:html;toolbar:false;"><div class="container">
  <div class="main-content">
    <div class="window" id="window1" style="transform: translation(-10%, -90%);">
      <div class="header" id="window-header">
        <img src="https://picsum.photos/800/550">
        <p class="title">navigation</p>
      </div>
    </div>
  </div>
 </div>

Answer 1

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

let stopDrag = false;
        const mouse = {}
        document.addEventListener('mousemove', (e) => {
            mouse.x = e.clientX;
            mouse.y = e.clientY;
        })
        document.getElementsByClassName('scrollbar')[0].addEventListener('mousedown', startDrag)
        document.getElementsByClassName('drag')[0].addEventListener('mousedown',startDrag)
        document.addEventListener('mouseup', () => {
            stopDrag = true;
        })
        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)
                }
            })
        }

.container {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 500;
}

.main-content {
   display: flex;
   width: 100%;
   height: 100%;
   overflow: auto;
   margin: auto;
}

.window {
   /*height: 16vw;
   width: 27vw;*/
   display: flex;
   height: 550px;
   width: 800px;
   position: absolute;
   top: 50%;
   left: 50%;
   border: solid blue 5px;
   background-color: black;
   margin: auto;
   overflow: hidden;
}
.scrollbar {
    height: 100%;
    width: 2%;
    position: fixed;
    top: 0%;
    right: 10%;
    z-index: 3;
    background: white;
}
.scrollbar .drag {
    background: darkgray;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 10%;
    
}
.scrollbar .drag:hover {
    background: grey;
}

<div class="container">
        <div class="main-content">
          <div class="window" id="window1" style="transform: translate(-10%, -90%);">
            <div class="header" id="window-header">
              <img src="https://picsum.photos/800/550">
              <div class="scrollbar">
                <div class="drag" draggable = false></div>
              </div>
              <p class="title">navigation</p>
            </div>
          </div>
        </div>
       </div>

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

Answer 2

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.