Mengapa html's overflow-x:hidden menjejaskan skrip butang kembali ke atas?

Question

hilang di bahagian atas bahagian skrip butang belakang ke atas tidak berfungsi kerana html { overflow-x: hidden;

<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;
}

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

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

Answer 1

Anda harus cuba mengatasinya overflow-x 样式，并通过 id pilih elemen anda. CSS:

#myBtn {
  overflow-x: visible !important;
}