Ne pouvez pas obtenir scrollTop() fonctionne dans Chrome & Firefox

Je vais avoir du mal à obtenir le scrollTop() la méthode de travail à la fois Firefox et Chrome. J'ai utilisé $('body, html').scrollTop(); toutefois, il ne fonctionne pas sous Chrome. Seulement $('body').scrollTop(); fonctionne dans Chrome. Toutes les pensées seraient grandement appréciés. 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>

InformationsquelleAutor Jonny Cerveza | 2013-09-13

31

Utilisation de l'objet document au lieu
```
$(document).scrollTop();
```
- Merci cela a résolu mon problème.
- Je souhaite qu'il y avait un moyen de drapeau ALORS des réponses comme "archaïque et inutile", parce que le sommet de résultats sur google m'a envoyé sur une sauvage goosechase, s'est avéré que c'était parce que c'était à partir de 2010. C'est la réponse que les gens ont besoin.
- Je suis curieux de voir comment cela fonctionne, puisque le document lui-même n'a pas de scrollTp de propriété ou de toute information sur la position de défilement
- Cela a fonctionné pour moi. Petit commentaire. Si vous utilisez animate() pour faire défiler le document, vous devez utiliser $("html, body").
InformationsquelleAutor Dustin Blake
11

J'ai eu ce même problème. La meilleure solution pour moi était de le faire sur window:
```
var offset = $(window).scrollTop();
```
Dans l'ordre pour que cela fonctionne bien, votre corps et des éléments html ne peut pas avoir un height ensemble de 100%. utilisation min-height au lieu

EDIT: le HTML élément peut utiliser height: 100%, cependant, si vous avez besoin de la body s'étendre à toute la hauteur, vous devez utiliser min-height: 100% à la place. Sinon, le scrollTop renvoie toujours "0"
- Le min-height: 100% sur le code html résolu mon problème. Merci @DoubleA
- Même ici, mon problème est aussi que j'ai utilisé de la hauteur: 100%. Merci!
InformationsquelleAutor DoubleA
4

Essayer, c'est de défilement sur le dessus avec de l'animation, qui est considérée plus efficace
```
$("html, body").animate({ scrollTop: 0 }, 2000);
```
Démo Ici
- cela ne fonctionne pas quand le html ou le corps de débordement est réglé sur auto. ce que vous pouvez faire est de créer un div conteneur et animer ce.
InformationsquelleAutor S. S. Rawat
2

Vous utilisez plusieurs sélecteur et il retournera un tableau des éléments du DOM. L'appel de fonction get de ce tableau semble être trouvé dans google Chrome (fonctions de définition devrait fonctionner)?

De toute façon, vous pouvez utiliser $('body').scrollTop() || $('html').scrollTop() dans votre cas.

Ou juste $(document) comme mentionné dans la réponse de Justin.
- $(window).scrollTop() semble fonctionner de manière cohérente dans tous les navigateurs
InformationsquelleAutor mrmoment
1

Utilisé cette solution:

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

Fournis dans cette réponse dans un autre thread:
https://stackoverflow.com/a/33462363

Vous n'avez pas besoin d'impliquer jQuery et il fonctionne très bien pour moi.

InformationsquelleAutor Anders
0

Supprimer la hauteur du style de l'organisme,les balises html. Ajouter un id de la div principale sous le corps par exemple, #contenu, puis l'utilisation de script suivant. Comme précédemment cité exécuter $(document).scrollTop(); dans le navigateur de la console et assurez-vous qu'il renvoie une valeur différente de 0.
```
$('body, html').animate({
  scrollTop: $('#content ').offset().top
}, 1000);
```
InformationsquelleAutor ehtulhaq
0

essayez ce simple code javascript pour faire défiler l'élément à l'aide de l'id de
```
document.getElementById("id").scrollTop=0;
```
InformationsquelleAutor

Vous devez vous connecter pour publier un commentaire.