无法滚动到页面上方元素的溢出部分

Question

如果我调整页面大小，元素溢出到视口之上，我无法向上滚动查看它们。我找到了一个带有解决方案的问题，但它没有起作用。我有两个“核心”的不可见div和一个包含所有内容的div元素。“container”div的存在是因为我试图解决这个问题。.container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:500;}.main-co

P粉814160988 · Answer

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

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

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

基本上，我使用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移动，可以在其上创建另一个容器）以查看它如果拖动停止，我们清除间隔

P粉291886842 · Answer

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