wake-up-neo.com

ScrollTop () kann nicht in Chrome und Firefox verwendet werden

Ich habe Probleme, die scrollTop () -Methode in Firefox und Chrome zu verwenden. Ich habe $('body, html').scrollTop(); verwendet, aber es funktioniert nicht in Chrome. Nur $('body').scrollTop(); funktioniert in Chrome. Alle Gedanken wären sehr dankbar. Unten ist mein Code.

<!DOCTYPE html>
<html>
<head>
  <title>Demo</title>
  <style type="text/css">
  body {
    height: 2000px;
  }

  #light {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -400px;
    margin-top: -200px;
    width: 800px;
    height: 400px;
    background-color: blue;
    z-index:1002;
    overflow: auto;
  }
</style>
</head>

<body>
  <div id="light">
  </div>

<!-- Used the google jQuery link for ease of use in this example   -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $(window).scroll(function () {
        var offset = $('body, html').scrollTop();
        var view = $(window).height();
        var total = $(document).height();
        var percent = 1-(offset / (total - view));
        var widthFactor = 800*percent;
        var marginFactor = -(400*percent)

        if(percent > 0.33){
          $("#light").css({ "width" : widthFactor,
                      "margin-left" : marginFactor});
        };
      });
    });
  </script>
</body>
</html>
javascriptjquerygoogle-chromefirefoxscrolltop
21
Jonny Cerveza

Verwenden Sie stattdessen das Dokumentobjekt

$(document).scrollTop();
32
Dustin Blake

Ich hatte das gleiche Problem. Die beste Lösung für mich war es auf window zu tun:

var offset = $(window).scrollTop();

Damit dies funktioniert, können für Ihre Körper- und HTML-Elemente keine height auf 100% eingestellt sein. Verwenden Sie stattdessen min-height

BEARBEITEN: Das Element HTML kann height: 100% verwenden. Wenn Sie jedoch die Variable body auf volle Höhe ausdehnen möchten, müssen Sie stattdessen min-height: 100% verwenden. Ansonsten gibt die scrollTop immer "0" zurück.

11
DoubleA

Versuchen Sie dies, dies ist ein Bildlauf mit Animation, die effektiver erscheint

$("html, body").animate({ scrollTop: 0 }, 2000);

Demo Here

5
S. S. Rawat

Sie verwenden die Mehrfachauswahl und geben ein Array von DOM-Elementen zurück. Der Aufruf der Getter-Funktion dieses Arrays erscheint in Chrome undefiniert (Setter-Funktionen sollten funktionieren).

In jedem Fall können Sie $('body').scrollTop() || $('html').scrollTop() verwenden.

Oder einfach nur $ (document) wie in Justins Antwort erwähnt.

2
mrmoment

Verwendet diese Lösung:

window.scrollY || window.pageYOffset || document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0)

Wird in dieser Antwort in einem anderen Thread bereitgestellt: https://stackoverflow.com/a/3346236

Sie müssen jQuery nicht einbeziehen und es funktioniert gut für mich.

1
Anders

Höhenstil aus dem Körper entfernen, HTML-Tags. Fügen Sie dem Haupt-Div unter body eine ID hinzu, z. #content verwenden Sie dann folgendes Skript. Wie zuvor zitiert, führen Sie $(document).scrollTop(); in der Browser-Konsole aus und stellen Sie sicher, dass ein Wert nicht 0 zurückgegeben wird.

$('body, html').animate({
  scrollTop: $('#content ').offset().top
}, 1000);
0
ehtulhaq

probieren Sie diesen einfachen Javascript-Code für das Scroll-Element mit der ID aus 

document.getElementById("id").scrollTop=0;
0
user4963716