Discussion :

[lokomass]

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

[psychadelic]

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

[lokomass]

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

[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.

[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....

[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 ?

[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 !

[Invité]

"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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

[lokomass]

Merci pour cette réponse mais Moseover fonctionnera t’il avec un mobile ? Car je scroll juste avec le doigt ?

[Invité]

Tu veux que je te prête mon doigt pour essayer ?

[lokomass]

Non pas la peine, a vrai dire, si je faisais la remarque c'est que je savais bien que ça ne marcherait pas

[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.

[Invité]

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

T'es sûr ?

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