web-dev-qa-db-fra.com

Rechercher le décalage par rapport au div de défilement parent au lieu de la fenêtre

J'ai un élément de défilement à l'intérieur d'une fenêtre.

Dites une division ayant une classe "currentContainer" avec débordement automatique et cette division contient une énorme quantité de texte de sorte qu'elle soit définitivement assez grande pour être défilante.

Maintenant, je dois faire des calculs en fonction de la quantité de "currentContainer" qui a défilé vers le bas + quel est le décalage d'un élément spécifique de sa division de défilement parent (c'est-à-dire "currentCoantainer").

Mais lors du calcul de l'offset, j'obtiens toujours l'offset de l'élément enfant interne par rapport à la fenêtre et non avec le "currentContainer".

JS FIDDLE

@Shikkediel J'ai également essayé d'utiliser position().top au lieu de offset().top mais donne également le même résultat. Jetez-y un œil:

JS FIDDLE 2

Veuillez ne pas suggérer d'utiliser:

$("<reference of scrolling element").scrollTop() 
+ 
$("<reference of child element whose offset I want to calculate>").offset().top

Parce que cela va compliquer mes calculs réels que je suis sur le point de faire au-delà de cela.

La raison pour laquelle je ne veux pas utiliser l'approche mentionnée ci-dessus est que j'essaie de modifier un code existant qui est déjà trop salissant mais qui fonctionne parfaitement en ce qui concerne la fenêtre, je dois juste le mettre à jour pour qu'il commence à fonctionner par rapport à son parent scrolling div.

J'ai essayé d'utiliser l'approche mentionnée ci-dessus mais cela m'a ouvert une boîte de crabes. parce que les fonctions sont trop étroitement couplées. Je pense donc que si je peux obtenir une solution simple et directe, c'est-à-dire remplacer .offset().top par quelque chose d'autre.

J'ai essayé de déboguer le code et toujours pas de chance, j'ai ajouté le code réel à http://jsfiddle.net/arpitajain/kwkm7com/

P.S. C'est du code réel mais pas complet Je pense que le reste du code n'était pas nécessaire pour cette erreur.

jquerycssscrolloverflowscrolltop
16
Arpita

Vous pouvez simplement soustraire l'offset de l'élément parent de l'offset de l'élément enfant. Est-ce que cela compliquera également les autres choses que vous devez faire?

$(".getoffset").offset().top - $(".getoffset").offsetParent().offset().top

http://jsfiddle.net/kmLr07oh/2/

15
Tim Mullen

C'est probablement ce que vous cherchez

var scrollOffset = $(".container .element")[0].offsetTop - $(".container")[0].offsetTop

———————————

Si vous voulez des informations, cela devrait vous permettre de faire la plupart du chemin:

// Position of first element relative to container top
var scrollTop = $(".container .element").offset().top - $(".container").offset().top;

// Position of selected element relative to container top
var targetTop = $(".container > *").offset().top - $(".container").offset().top;

// The offset of a scrollable container
var scrollOffset = scrollTop - targetTop;

// Scroll untill target element is at the top of its container
$(".container").scrollTop(scrollOffset);

Voir aussi: Calculer le décalage du haut des éléments à l'intérieur d'un div défilant

7
Quinn Keaveney

Une solution Javascript Vanilla serait:

const el = document.querySelector('.getoffset');
const offset = el.getBoundingClientRect().top - el.offsetParent.getBoundingClientRect().top;

Violon: http://jsfiddle.net/njb1xcz0/

2
andreivictor

Dans mon test

//has the same value
console.log(
    'compare:',
    $("#element").offset().left - $("#container").offset().left,
    $("#element").position().left
);

Sorcière signifie qu'il obtient position absolue au parent. Pour obtenir position relative au parent, j'utilise:

let relative_position_x = Element.position().left + scroller.scrollLeft();
let relative_position_y = Element.position().top + scroller.scrollTop();
0
Corxit Sun