Tidak dapat menatal ke bahagian limpahan elemen di atas halaman

Question

Jika saya mengubah saiz halaman, elemen melimpah di atas port pandangan dan saya tidak boleh menatal ke atas untuk melihatnya. Saya menemui soalan dengan penyelesaian tetapi ia tidak berjaya. Saya mempunyai dua div tidak kelihatan "teras" dan satu elemen div yang mengandungi semua kandungan.

Div "bekas" wujud kerana saya cuba menyelesaikan masalah ini.

.container {
   kedudukan: tetap;
   atas: 0;
   kiri: 0;
   lebar: 100%;
   ketinggian: 100%;
   indeks z: 500;
}

.kandungan utama {
   paparan: flex;
   lebar: 100%;
   ketinggian: 100%;
   limpahan: auto;
   margin: auto;
}

.window {
   /*tinggi: 16vw;
   lebar: 27vw;*/
   paparan: flex;
   ketinggian: 550px;
   lebar: 800px;
   jawatan: mutlak;
   atas: 50%;
   kiri: 50%;
   sempadan: biru pepejal 5px;
   warna latar belakang: hitam;
   margin: auto;
   limpahan: tersembunyi;
}

<div class="container">
  <div class="kandungan-utama">
    <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">navigasi</p>
      </div>
    </div>
  </div>
 </div>

Answer 1

Untuk masalah ini, saya rasa satu-satunya penyelesaian adalah dengan membuat bar skrol tersuai (jika anda perlu meletakkan imej di atas viewport)

Ini adalah kod yang saya buat berdasarkan kod anda

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>

PENJELASAN

Pada asasnya, saya membuat bar skrol menggunakan HTML dan CSS dan meletakkannya di bahagian paling kanan imej

Semoga HTML dan CSS dapat difahami Sekarang, mari kita lihat bahagian JavaScript

Pertama, kami memetakan koordinat tetikus

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

Kami mencipta pendengar acara yang memanggil fungsi atau menukar pembolehubah seret berhenti

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

Kemudian kami mencipta fungsi 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)
                }
            })
        }

Dalam fungsi ini, mula-mula kita tetapkan seret henti kepada palsu kerana pengguna sedang menyeret bar skrol Kemudian kami menyediakan kod gelung selang Mengikut koordinat, mouse.y kebanyakannya adalah percubaan dan kesilapan. Kami menyemak sama ada ia berada dalam had dan jika ya kami berpindah Kemudian kami menukar kedudukan atas bar skrol semasa menyeret (pengiraan adalah percubaan dan ralat) Kemudian kami menukar kedudukan bawah div kelas tetingkap untuk meletakkan semula div kelas tetingkap (kerana imej itu sendiri tidak boleh diubah kedudukannya; jika anda tidak mahu seluruh div kelas tetingkap bergerak, anda boleh mencipta bekas lain di atasnya) untuk melihatnya Jika penyeretan berhenti, kami kosongkan selang

Answer 2

Terima kasih kepada @TylerH kerana menyelesaikan isu ini. Masalahnya ialah dengan gaya transformasi dalam HTML saya. Selepas mengeluarkannya, ia menatal dengan betul. Daripada apa yang saya lihat, ia seolah-olah mengimbangi penatalan dan seolah-olah mengalihkan keseluruhan halaman dan bukannya elemen sahaja. Terima kasih atas bantuan semua orang, tetapi saya telah mengetahuinya.