web-dev-qa-db-fra.com

Impossible que scrollTop () fonctionne avec Chrome et Firefox

Je ne parviens pas à faire fonctionner la méthode scrollTop () dans Firefox et Chrome. J'ai utilisé $('body, html').scrollTop(); cependant, cela ne fonctionne pas dans Chrome. Seul $('body').scrollTop(); fonctionne sous Chrome. Toute pensée serait grandement appréciée. Ci-dessous mon 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

Utilisez plutôt l'objet document

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

J'ai eu le même problème. La meilleure solution pour moi était de le faire le window:

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

Pour que cela fonctionne cependant, votre corps et vos éléments HTML ne peuvent pas avoir une variable height définie sur 100%. utilisez min-height à la place

EDIT: l’élément HTML peut utiliser height: 100%; toutefois, si vous avez besoin de body pour s’étirer à toute la hauteur, vous devez utiliser min-height: 100% à la place. Sinon, la scrollTop retourne toujours "0"

11
DoubleA

Essayez ceci, c’est le défilement sur le dessus avec une animation qui se voit plus efficace

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

Démo Here

5
S. S. Rawat

Vous utilisez plusieurs sélecteurs et il retournera un tableau d'éléments DOM. L'appel de la fonction getter de ce tableau ne semble pas défini dans Chrome (les fonctions de définition devraient fonctionner)

Quoi qu'il en soit, vous pouvez utiliser $('body').scrollTop() || $('html').scrollTop() dans votre cas.

Ou simplement $ (document) comme mentionné dans la réponse de Justin.

2
mrmoment

Supprimer le style de hauteur du corps, balises HTML. Ajoutez un identifiant à la division principale sous le corps, par exemple. #content utilise ensuite le script suivant. Comme indiqué précédemment, exécutez $(document).scrollTop(); dans la console du navigateur et assurez-vous qu'il renvoie une valeur autre que 0.

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

essayez ce code javascript simple pour l'élément scroll avec id 

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