Unable to scroll to the overflow part of the element above the page

Question

If I resize the page, the elements overflow above the viewport and I can't scroll up to see them. I found a question with a solution but it didn't work. I have two "core" invisible divs and one div element that contains all the content. The "container" div exists because I'm trying to solve this problem. .container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:500;}.main-co

P粉814160988 · Answer

For this problem, I think the only solution is to make a custom scrollbar (if you have to place the image above the viewport)

This is the code I made based on your 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;
}

EXPLANATION

Basically, I made a scrollbar using HTML and CSS and placed it on the far right side of the image

Hope HTML and CSS can be understood Now, let's look at the JavaScript part

First, we map the mouse coordinates

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

We create an event listener that calls a function or changes the stop drag variable

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

Then we create the startDrag() function

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)
                }
            })
        }

In this function, first we set stopdrag to false because the user is currently dragging the scroll bar Then we set up an interval loop code According to the coordinates, mouse.y is mostly trial and error. We check if it is within the limits and if so we relocate Then we change the top position of the scrollbar while dragging (calculation is trial and error) Then we change the bottom position of the window class div to reposition the window class div (because the image itself cannot be repositioned; if you don't want the whole window class div to move, you can create another container on top of it) to view it If dragging stops, we clear the interval

P粉291886842 · Answer

Thanks to @TylerH for resolving this issue. The problem is with the transform style in my HTML. After removing it, it scrolls correctly. From what I've seen, it seems to offset the scrolling and seems to move the entire page instead of just the elements. Thanks for everyone's help, but I've figured it out.