無法捲動到頁面上方元素的溢出部分

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樣式。刪除它後，它可以正確滾動。從我看到的情況來看，它似乎會偏移滾動，並且好像是移動整個頁面而不僅僅是元素。感謝大家的幫助，但我已經解決了。