Afficher un curseur au dessus de la div courante au scroll

Version imprimable

18/04/2020, 15h43
lokomass

Afficher un curseur au dessus de la div courante au scroll

Bonjour à tous,

J'ai actuellement une liste de div, de hauteur aléatoire.

Je cherche à positionner un curseur en haut à gauche de la div "courante".

En fait l'idée, c'est au scroll (c'est pour un mobile, donc au scroll avec le doigt :)), que le curseur se déplace pour se positionner devant la div qui est en haut de l'écran.

A priori j'ai le bon fonctionnement, seulement quand j'arrive en bas de mon scrolling, je suis bloqué avec ma div sélectionnée en haut de l'écran.

Je veux bien dire que quand je sois tout en bas, je sélectionne celle du bas, mais pour celles entres, je ne vois pas comment faire...

Je sèche totalement :)

Voici une idée de ce que j'essaye de faire pour mieux comprendre : https://codepen.io/lokomass/pen/OJyXXwV

Merci pour votre aide ;)
18/04/2020, 19h47
psychadelic

qu'est-ce que tu entends par curseur ? tu veux repositionner la souris sur tes div ?
19/04/2020, 08h18
lokomass

Citation:

Envoyé par psychadelic

qu'est-ce que tu entends par curseur ? tu veux repositionner la souris sur tes div ?

Non le curseur c’est le petit triangle en haut à gauche de chaque cellule dans ma démo
19/04/2020, 08h48
Invité

Bonjour,

ta problématique n'a pas de solution.
Si plusieurs div sont affichées, le programme ne peut pas savoir/deviner laquelle "tu regardes".
Le problème ne se pose plus si la hauteur de la fenêtre fait moins que la hauteur de 2 div consécutives (= on voit moins de 2 div à l'écran).

Une solution serait de déplacer le pointeur, manuellement AU CLIC ou automatiquement AU SURVOL sur un div.
19/04/2020, 09h25
lokomass

J’avais commencé à bricoler une solution qui consistait à dire que si le scroll est dans la dernière partie de la fenêtre, on inverse le système, à savoir sélectionner la cellule en partant du bas, mais le souci, c’est que le problème est juste reporté plus haut.....
L’idée c’était de dire jusqu’à x pixels, la première visible est sélectionnée, et après c’est la plus basse mais entre les x pixels et la fin de page, les cellules ne seront pas sélectionnées..
Ça ne me paraissait pourtant pas infaisable....
19/04/2020, 09h27
lokomass

Et sinon, une idée à l’instant. Est-ce que je ne peux pas faire un listing de toutes les div, en disant par exemple de 0 à 100, c’est la 1, de 100 à 150 c’est la 2..... et ensuite je regarde la valeur du scroll. Et je récupère la div comme ça ?
19/04/2020, 09h48
Invité
Simplifions le problème :
- 4 div sont affichées à l'écran.
- (on suppose qu'on est en bas de l'écran, donc on ne peut plus scroller)
Sur LAQUELLE le programme est-il censé mettre le pointeur ?
Il ne peut pas le deviner !

"Mon interprétation" de la solution : https://codepen.io/jreaux62/pen/XWmKyQE

déplacer le pointeur automatiquement AU SURVOL
déplacer le div vers le haut, AU CLIC

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
$(document).ready(function() {
  for (i=0;i<100;i++) {
    var h = Math.floor(Math.random() * (50 + 1) + 20);
    $('.content').append('<div id="'+i+'" class="cell" style="height:'+h+'px;"></div>');
  }
  // ---------
  $(document).on('scroll', function() {
    var id = current();
    $('.cursor').css('top', $('#'+id).position().top+'px')
  });
  // ---------
  $('.cell').on('mouseover', function() {
    var id = $(this).attr('id');
    $('.cursor').css('top', $('#'+id).position().top+'px')
  });
  // ---------
  $('.cell').on('click', function() {
    var elt = $(this);
    console.log(elt.offset());
        $('html, body').stop().animate({
        'scrollTop': elt.offset().top
      }, 500);
  });
  // ---------
});
 
function current() {
  $('.cell').each(function() {
     if ($(this).position().top > $(document).scrollTop()) {
        id = $(this).attr('id');
        return false;
     }
  });
  return id;
}

19/04/2020, 10h50
lokomass

Merci pour cette réponse mais Moseover fonctionnera t’il avec un mobile ? Car je scroll juste avec le doigt ?
19/04/2020, 12h25
Invité

Tu veux que je te prête mon doigt pour essayer ? :no:
19/04/2020, 13h58
lokomass

Non pas la peine, a vrai dire, si je faisais la remarque c'est que je savais bien que ça ne marcherait pas :weird:
19/04/2020, 14h29
psychadelic

pas sur d'avoir bien compris, mais pour moi le principe pour coder ça est assez simple:

mettre un écouteur d'évènement scroll sur le parent des divs

sur cet evt enlever les curseurs triangles de toutes les div

itérer de la première div à la dernière et regarder sa position verticale par rapport à la valeur du scroll; et mettre la première qui soit positive avec un triangle curseur et arrêter la boucle alors.
19/04/2020, 15h05
Invité

Citation:

Envoyé par lokomass

...je savais bien que ça ne marcherait pas :weird:

T'es sûr ? :weird:

Citation:

"Cette certitude d'avoir raison qui est, à mes yeux, le signe infaillible de l'erreur."
Jean Rostand