Es ist nicht möglich, zum Überlaufteil des Elements über der Seite zu scrollen

Question

Wenn ich die Größe der Seite ändere, laufen die Elemente über das Ansichtsfenster hinaus und ich kann nicht nach oben scrollen, um sie zu sehen. Ich habe eine Frage mit einer Lösung gefunden, aber sie hat nicht funktioniert. Ich habe zwei unsichtbare „Kern“-Divs und ein Div-Element, das den gesamten Inhalt enthält.

Das Div „container“ existiert, weil ich versuche, dieses Problem zu lösen.

.container {
   Position: fest;
   oben: 0;
   links: 0;
   Breite: 100 %;
   Höhe: 100 %;
   Z-Index: 500;
}

.Hauptinhalt {
   Anzeige: Flex;
   Breite: 100 %;
   Höhe: 100 %;
   Überlauf: automatisch;
   Rand: automatisch;
}

.Fenster {
   /*Höhe: 16vw;
   Breite: 27vw;*/
   Anzeige: Flex;
   Höhe: 550px;
   Breite: 800px;
   Position: absolut;
   oben: 50 %;
   links: 50 %;
   Rand: einfarbig blau 5px;
   Hintergrundfarbe: schwarz;
   Rand: automatisch;
   Überlauf versteckt;
}

<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">
        <p class="title">navigation</p>
      </div>
    </div>
  </div>
 </div>

Answer 1

对于这个问题，我认为唯一的解决方案是制作一个自定义滚动条（如果必须将图像放在视口上方）

这是我根据您的代码制作的代码

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>

EXPLANATION

基本上，我使用HTML和CSS制作了一个滚动条，并将其放置在图像的最右侧

希望HTML和CSS能够理解 现在，让我们来看看JavaScript部分

首先，我们映射鼠标坐标

const mouse = {}
document.addEventListener('mousemove', (e) => {
            mouse.x = e.clientX;
            mouse.y = e.clientY;
        })

我们创建调用函数或更改stop drag变量的事件监听器

let stopDrag = false;
document.getElementsByClassName('scrollbar')[0].addEventListener('mousedown', startDrag)
        document.getElementsByClassName('drag')[0].addEventListener('mousedown',startDrag)
        document.addEventListener('mouseup', () => {
            stopDrag = true;
        })

然后我们创建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)
                }
            })
        }

在这个函数中，首先我们将stopdrag设置为false，因为用户当前正在拖动滚动条 然后我们设置一个间隔循环代码 根据坐标，mouse.y大部分是试错 我们检查它是否在限制范围内，如果是，我们重新定位 然后我们在拖动时更改滚动条的顶部位置（计算是试错的） 然后我们更改window类div的底部位置来重新定位window类div（因为图像本身无法重新定位；如果您不希望整个window类div移动，可以在其上创建另一个容器）以查看它 如果拖动停止，我们清除间隔

Answer 2

感谢@TylerH解决了这个问题。问题出在我的HTML中的transform样式上。删除它后，它可以正确滚动。从我看到的情况来看，它似乎会偏移滚动，并且好像是移动整个页面而不仅仅是元素。感谢大家的帮助，但我已经解决了。