Warum wirkt sich overflow-x:hidden von HTML auf das Skript der Schaltfläche „Zurück zum Anfang“ aus?

Question

Der vanish at top-Teil des Zurück-nach-oben-Button-Skripts funktioniert aufgrund von html { overflow-x: versteckt; }

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- Enthält jQuery -->

    <button onclick="topFunction()" class="buton" id="myBtn" title="Zurück nach oben"><i class="fa-solid fa-angle-up"></i> ;

        <script>
    let mybutton = document.getElementById("myBtn");
    
    window.onscroll = function() {scrollFunction()};
    
    Funktion scrollFunction() {
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        mybutton.style.display = "block";
      } anders {
        mybutton.style.display = "none";
      }
    }
    
    Funktion topFunction() {
      document.body.scrollTop = 0; // für Safari
      document.documentElement.scrollTop = 0; // Gilt für Chrome, Firefox, IE und Opera
    }
            </script>
            </button>

CSS


    html,
    Körper {
    Höhe: 100 %;
    Scrollverhalten: glatt;
    Position: relativ;
    Überlauf-x: versteckt;
  }

Körper {
    Hintergrundfarbe:#060606;
    Schriftfamilie: „Montserrat“, serifenlos;
    Farbe: #ffffff;
    Rand: 0;
    Polsterung: 0;
}

.buton {
  overflow-x: sichtbar !important;
}
  
#myBtn {
  Anzeige: keine;
  Position: fest;
  unten: 20px;
  rechts: 30px;
  Z-Index: 99;
  Grenze: keine;
Gliederung: keine;
  Hintergrundfarbe: rot;
  Farbe weiß;
  Cursor: Zeiger;
  Polsterung: 15px;
  Randradius: 10px;
  Schriftgröße: 18px;
}

#myBtn:hover {
  Hintergrundfarbe: #333;
}

Das meiste davon ist Code, bitte fügen Sie weitere Details hinzu, das meiste davon ist Code, bitte fügen Sie weitere Details hinzu, das meiste davon ist Code, bitte fügen Sie weitere Details hinzu, das meiste davon ist Code, bitte fügen Sie weitere Details hinzu, das meiste es ist Code, bitte fügen Sie weitere Details hinzu, es ist größtenteils Code, bitte fügen Sie weitere Details hinzu, es ist größtenteils Code, bitte fügen Sie weitere Details hinzu, es ist größtenteils Code, bitte fügen Sie weitere Details hinzu, es ist größtenteils Code, bitte fügen Sie weitere Details hinzu Weitere Details

Wenn ich das Overflow-X im HTML entferne, verschwinden die Schaltflächen oben, aber rechts vom gesamten Website-Inhalt bleibt Leerraum.

Answer 1

你应该尝试覆盖那个 overflow-x 样式，并通过 id 选择你的元素。 CSS：

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