Mengapa html's overflow-x:hidden menjejaskan skrip butang kembali ke atas?
P粉633309801
2023-08-17 12:48:44
<p> <em>hilang di bahagian atas</em> bahagian skrip butang belakang ke atas tidak berfungsi kerana <kod>html { overflow-x: hidden; </p>
<pre class="brush:php;toolbar:false;"><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- Mengandungi jQuery -->
<butang onclick="topFunction()" class="buton" id="myBtn" title="Kembali ke atas"><i class="fa-solid fa-angle-up"></i> ;
<skrip>
let mybutton = document.getElementById("myBtn");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
jika (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "sekat";
} lain {
mybutton.style.display = "tiada";
}
}
function topFunction() {
document.body.scrollTop = 0; // untuk Safari
document.documentElement.scrollTop = 0; // Berlaku pada Chrome, Firefox, IE dan Opera
}
</skrip>
</butang>
CSS
html,
badan {
ketinggian: 100%;
tatal-kelakuan: licin;
kedudukan: relatif;
limpahan-x: tersembunyi;
}
badan {
warna latar belakang:#060606;
font-family: 'Montserrat', sans-serif;
warna: #ffffff;
margin: 0;
padding: 0;
}
.buton {
limpahan-x: kelihatan !penting;
}
#myBtn {
paparan: tiada;
kedudukan: tetap;
bawah: 20px;
kanan: 30px;
indeks z: 99;
sempadan: tiada;
garis besar: tiada;
warna latar belakang: merah;
warna: putih;
kursor: penunjuk;
padding: 15px;
jejari sempadan: 10px;
saiz fon: 18px;
}
#myBtn:hover {
warna latar belakang: #333;
}</pre>
<p>Sebahagian besarnya adalah kod, sila tambah butiran lanjut, kebanyakannya adalah kod, sila tambah butiran lanjut, kebanyakannya adalah kod, sila tambah butiran lanjut, kebanyakannya adalah kod, sila tambah butiran lanjut, kebanyakannya Ia adalah kod, sila tambah lebih banyak butiran, ia kebanyakannya kod, sila tambah lebih banyak butiran, ia kebanyakannya kod, sila tambah lebih banyak butiran, ia kebanyakannya kod, sila tambah lebih banyak butiran, ia kebanyakannya kod, sila tambah lebih banyak butiran Butiran lanjut</p>
<p>Jika saya mengalih keluar limpahan-x dalam html, butang akan hilang di bahagian atas, tetapi akan ada ruang putih di sebelah kanan keseluruhan kandungan tapak</p>
Anda harus cuba mengatasinya
overflow-x
样式,并通过id
pilih elemen anda. CSS: