Kokujou
Lieutenant
- Registriert
- Dez. 2017
- Beiträge
- 929
Hi Leute,
ich hab ein kleines Projekt aufgezogen und arbeite da mit WebComponents. So massiv, dass quasi das ganze Projekt eine Sammlung aus WebComponents ist.
Nun habe ich aber ein Problem, und ein Bild sagt mehr als tausend Worte:
ich habe einen Scroll-Select gebaut. Das bedeutet dass ich das native Scroll-behaviour überschreibe und nur gesteuert über bestimmte events wie z.B. drag und klick die position der beiden Striche veränderte, die das aktuell ausgewählte Item anzeigen. Coole Idee oder? Funktionieren tut es ganz gut. Allerdings hab ich nun ein Problem. Und zwar scheint das initial einfach nicht zu funktionieren.
Meine Konsole ist Lupenrein, es kann also nicht sein dass er einfach nur irgendwelche Argumente nicht geladen hat. Für die Webcomponents benutze ich LitHTML, und um sicher zu stellen, dass das Scrollen zum initial aktiven Element immer nach dem Rendern passiert überschreibe ich die updated() methode.
das ganze sieht dann so aus:
und die scrollIntoParentView sieht so aus
den Status den ihr seht, also dass das erste Element zu... sagen wir mal 20% nicht im Rahmen der beiden Linien ist ist eigentlich gar nicht möglich. ich nehme also an dass er ohne dass irgendeines der custom scroll events fruchtet, einfach scrollTop = 0 hat.
wär cool, wenn ihr mir etwas unter die Arme greifen könntet
ich hab ein kleines Projekt aufgezogen und arbeite da mit WebComponents. So massiv, dass quasi das ganze Projekt eine Sammlung aus WebComponents ist.
Nun habe ich aber ein Problem, und ein Bild sagt mehr als tausend Worte:
ich habe einen Scroll-Select gebaut. Das bedeutet dass ich das native Scroll-behaviour überschreibe und nur gesteuert über bestimmte events wie z.B. drag und klick die position der beiden Striche veränderte, die das aktuell ausgewählte Item anzeigen. Coole Idee oder? Funktionieren tut es ganz gut. Allerdings hab ich nun ein Problem. Und zwar scheint das initial einfach nicht zu funktionieren.
Meine Konsole ist Lupenrein, es kann also nicht sein dass er einfach nur irgendwelche Argumente nicht geladen hat. Für die Webcomponents benutze ich LitHTML, und um sicher zu stellen, dass das Scrollen zum initial aktiven Element immer nach dem Rendern passiert überschreibe ich die updated() methode.
das ganze sieht dann so aus:
Code:
this.currentItemIndex = this.options.findIndex((x) => x == this.value);
scrollIntoParentView(this.scrollChildren[this.currentItemIndex], this.scrollContainer);
und die scrollIntoParentView sieht so aus
Code:
/**
* @param {HTMLElement} element
* @param {HTMLElement} parent
*/
export function scrollIntoParentView(element, parent) {
var targetLeft = element.offsetLeft - parent.offsetWidth / 2;
var targetTop = element.offsetTop - parent.offsetHeight / 2 + element.offsetHeight / 2;
parent.scrollTo({ left: targetLeft, top: targetTop, behavior: 'smooth' });
}
den Status den ihr seht, also dass das erste Element zu... sagen wir mal 20% nicht im Rahmen der beiden Linien ist ist eigentlich gar nicht möglich. ich nehme also an dass er ohne dass irgendeines der custom scroll events fruchtet, einfach scrollTop = 0 hat.
wär cool, wenn ihr mir etwas unter die Arme greifen könntet