Rumah > Soal Jawab > teks badan
P粉8141609882023-08-31 19:12:30
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>
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
P粉2918868422023-08-31 00:33:50
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.