J'ai un div défilable avec une hauteur fixe. Pendant le défilement, j'ai besoin d'obtenir l'élément en haut de la fenêtre visible et celui en bas de la fenêtre. Je peux obtenir la position de la barre de défilement en utilisant scrollTop, mais je ne suis pas sûr de savoir comment obtenir l'élément.trouver haut et dernier élément à l'intérieur d'un div scrollable
Mise à jour: Question formatée pour plus de clarté.
Vous devez parcourir le div en utilisant les éléments DOM. Jetez un oeil ici, je pense que ce pourrait être une ressource utile: http://www.howtocreate.co.uk/tutorials/javascript/dombasics
Avec quelques tableaux et des compteurs, vous devriez être en mesure d'obtenir le dernier élément dans votre div.
Obtenez votre position de défilement de div
var scrollY = document.getElementById("yourDiv").scrollTop;
boucle à travers les éléments à l'intérieur et regarder leur position
var divs = document.getElementById("yourDiv").getElementsByTagName("div");
alert(divs[0].offsetTop)
savoir laquelle est à la position scrollTop et l'autre est à scrollTop + position de hauteur
Merci. Je vais essayer ça. Serait-il un moyen d'obtenir les divs sans boucle? Peut-être que si mes Divs avaient un Id incrémental ou quelque chose? – vikasde
La raison pour laquelle je veux éviter la boucle est parce que j'ai environ 2000 éléments sur ma page et je ne veux pas boucler à travers tous, toujours je défile. Merci – vikasde
S'ils ont une hauteur définie, c'est un problème de division simple. – epascarello
Je suppose que votre DIV est une longue liste de lignes de texte, et toutes vos lignes seront de hauteur uniforme. Si cela est vrai, vous n'avez pas besoin de demander lequel est en haut de la fenêtre, car vous pourrez le calculer.
De toute façon, vous souhaiterez afficher la première page de ce contenu en entier, alors créez une ligne complète et affichable, demandez-la pour sa hauteur et souvenez-vous de cela. Ensuite, vous ajoutez d'autres lignes contenant du texte jusqu'à ce que leur hauteur totale soit supérieure à la hauteur de la fenêtre. Ensuite, ajoutez environ 90 lignes vides afin que la taille et la position du pouce reflètent fidèlement la taille de la liste. Puis, quand quelqu'un fait défiler votre fenêtre, vous pouvez calculer quelles lignes devraient être visibles; zapper ceux qui ont quitté la vue et construire ceux qui devraient être visibles. Terminé!
(je pense - je ne l'ai jamais essayé ça!)
Vous devez vous assurer que les lignes "vides" sont EXACTEMENT aussi hautes que les lignes remplies. Puisque vous faites tout ce bidouillage dans JS de toute façon, je suppose que cela devrait être aussi simple que de définir un attribut CSS qui s'applique à toutes ces lignes. –
Oui, j'ai déjà utilisé CSS pour ça. Je l'ai presque fonctionné, cependant je remarque que quand je commence de nouveaux articles, alors le navigateur devient plus lent et plus lent. Il doit y avoir une fuite de mémoire quelque part. – vikasde
Ou vous pouvez essayer d'utiliser firstElementChild et lastElementChild:
first = document.querySelector('#your_div_id_or_selector').firstElementChild;
first.scrollIntoView()
et dernier élément
last = document.querySelector('#your_div_id_or_selector').lastElementChild;
last.scrollIntoView()
Je sais comment boucle, mais comment puis-je savoir quel élément a est maintenant au sommet de la div - où la barre de défilement est actuellement? – vikasde
Ah, votre formulation est un peu difficile à comprendre. Le truc en haut de la div sera toujours là :) Ce que vous demandez est l'élément en haut de la fenêtre/vue/vue visible, quelque chose comme ça. –
C'est exactement ce que je voulais dire :) – vikasde