J'ai une boîte div (appelée flux) avec une quantité variable de contenu à l'intérieur. Cette divbox a un débordement réglé sur auto.
Maintenant, ce que j'essaie de faire, c'est que lorsque l'utilisation défile vers le bas de cette boîte DIV, charge plus de contenu dans la page, je sais comment faire (charger le contenu) mais je ne sais pas comment détecter quand l'utilisateur a fait défiler vers le bas de la balise div? Si je voulais le faire pour la page entière, je prendrais .scrollTop et le soustraisais de .height.
Mais je n'arrive pas à faire ça ici?
J'ai essayé de prendre .scrollTop de flux, puis d'envelopper tout le contenu à l'intérieur d'un div appelé inner, mais si je prends la innerHeight du flux, il renvoie 564px (le div est défini sur 500 comme hauteur) et la hauteur de 'innner' il renvoie 1064, et le scrolltop, quand au bas de la div dit 564.
Que puis-je faire?
innerHeight()
rapporter les décimales. Dans le cas d'un utilisateur effectuant un zoom arrière, la somme descrollTop()
etinnerHeight()
sera toujours inférieure d'au moins une fractionscrollHeight
. J'ai fini par ajouter une zone tampon de 20 pixels. Le conditionnel résultant étaitif(el.scrollTop() + el.innerHeight() >= el[0].scrollHeight - 20)
oùel
égal à égal$(this)
.J'ai trouvé une solution qui lorsque vous faites défiler votre fenêtre et à la fin d'une div affichée en bas vous donne une alerte.
Dans cet exemple, si vous faites défiler vers le bas lorsque div (
.posts
) a terminé, vous recevrez une alerte.la source
var running = false
déclarée avant cela. A l'intérieur du conditionnel, je vérifie Deif(!running) { running = true; // and continue logic }
cette façon, il n'est appelé qu'une seule fois! Quand l'AJAX se termine, setrunning = false;
Bien que la question ait été posée il y a 5,5 ans, elle est toujours plus que pertinente dans le contexte UI / UX d'aujourd'hui. Et je voudrais ajouter mes deux cents.
Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled
Certains éléments ne vous permettent pas de faire défiler toute la hauteur de l'élément. Dans ces cas, vous pouvez utiliser:
la source
Juste une note supplémentaire ici car j'ai trouvé cela lorsque je cherche une solution pour un div fixe que je veux faire défiler. Pour mon scénario, j'ai trouvé qu'il est préférable de prendre en compte le rembourrage sur le div afin que je puisse atteindre la fin exactement. Donc, en développant la réponse de @ Dr.Molle, j'ajoute ce qui suit
Cela vous donnera l'emplacement précis, y compris le rembourrage et les bordures
la source
cela a bien fonctionné pour moi
la source
Si vous devez utiliser ceci sur un div qui a overflow-y comme caché ou scroll, quelque chose comme ça peut être ce dont vous avez besoin.
J'ai trouvé que le plafond était nécessaire car l'hélice scrollHeight semble arrondir, ou peut-être une autre raison qui fait que cela est désactivé de moins de 1.
la source
Si vous n'utilisez pas la fonction Math.round (), la solution suggérée par Dr.Molle ne fonctionnera pas dans certains cas lorsqu'une fenêtre de navigateur a un zoom.
Par exemple $ (this) .scrollTop () + $ (this) .innerHeight () = 600
$ (this) [0] .scrollHeight rendements = 599,99998
600> = 599,99998 échoue.
Voici le bon code:
Vous pouvez également ajouter des pixels de marge supplémentaires si vous n'avez pas besoin d'une condition stricte
la source
Dans une utilisation DOM simple, vous pouvez vérifier la condition
si c'est vrai, alors vous avez atteint la fin.
la source
Si quelqu'un obtient
scrollHeight
asundefined
, sélectionnez le 1er sous-élément des éléments:mob_top_menu[0].scrollHeight
la source
Je ne sais pas si c'est de l'aide, mais c'est comme ça que je le fais.
J'ai un panneau d'index plus grand que la fenêtre et je le laisse défiler jusqu'à la fin de cet index. Ensuite, je le fixe en position. Le processus est inversé une fois que vous faites défiler vers le haut de la page.
Cordialement.
la source
Bien que cela ait été demandé il y a près de 6 ans, il y a encore un sujet brûlant dans la conception UX, voici un extrait de démo si un débutant voulait utiliser
la source
Les gars, c'est la solution au problème de zoom, il fonctionne avec tous les niveaux de zoom, au cas où vous en auriez besoin:
la source
C'est le code sur github.
la source
Voici une autre version.
Le code clé est la fonction scroller () qui prend la hauteur de la div contenant la section de défilement, en utilisant overflow: scroll. Il se rapproche de 5 pixels du haut ou de 10 pixels du bas comme en haut ou en bas. Sinon, c'est trop sensible. Il semble que 10px soit à peu près le minimum. Vous verrez qu'il ajoute 10 à la hauteur div pour obtenir la hauteur inférieure. Je suppose que 5px pourrait fonctionner, je n'ai pas testé intensivement. YMMV. scrollHeight renvoie la hauteur de la zone de défilement interne, pas la hauteur affichée du div, qui dans ce cas est 400px.
la source