Hej, mam delikatny problem ze zrozumieniem jak dziala scollTo
kiedy uzywam go na zagniezdzonym elemencie. Tzn na mojej stronie mam okno edytora ktorego kontent zawarty jest w div
ie z ustawiona maksymalna wysokoscia 600px
i overflow-auto
zeby pojawil sie scrollbar. Wewnatrz edytora jest sporo naglowkow (h1-h3
) z ktorych kazdy ma jakies unikalne id. Chcialbym do edytora dodac spis treści ktore zawiera linki do odpowiednich naglowkow (tag a
z href={#id-naglowka}
). Zeby przejscie bylo plynne uzywam funkcji scrollTo
tak jak nizej
const onItemClick = (e, id) => {
e.preventDefault();
if (editor) {
// Konkretny naglowek do ktorego ma prowadzic klikniecie w link
const element = editor.view.dom.querySelector(`[data-toc-id="${id}"`);
const pos = editor.view.posAtDOM(element, 0);
// set focus
const tr = editor.view.state.tr;
tr.setSelection(new TextSelection(tr.doc.resolve(pos)));
editor.view.dispatch(tr);
editor.view.focus();
if (history.pushState) {
// eslint-disable-line
history.pushState(null, null, `#${id}`); // eslint-disable-line
}
// Element z contentem
let target = document.getElementById('editor-content') as HTMLElement;
target.scrollTo({
top: element.getBoundingClientRect().top,
behavior: 'smooth',
});
}
};
Uzywam tego na obiekcie target
a nie window
. Niestety przy obecnych ustawieniach kompletnie to nie dziala i nie dosc ze nie przewija sie do wybranego naglowka to jeszcze przy kazdym kliknieciu w ten sam link przewija raz w gore raz w dol. Ogolnie, na landing page mam to rozwiazane tak ze ustawiam na elemencie html
scroll-padding-top: 85px;
bo taka jest wysokosc mojego naglowka, ale w tym przypadku zagniezdzonym nie wiem jak to rozwiazac i czy ten scroll-padding
z html
bedzie mial wplyw na scrollowanie wewnatrz edytora i musze to jakos wyzerowac np ustawiajac go na 0 na elemencie editor-content
czy nie ma to wplywu? Bede wdziezny za pomoc.
EDIT: probowalem tez tak:
element.scrollIntoView({ behavior: 'smooth' });
i dziala ale wtedy z jakiegos powodu tez moj glowny scroll dla strony sie scrolluje maksymalnie w dol.
EDIT OK chyba wymyslilem:
top =
element.getBoundingClientRect().top +
target.scrollTop -
target.getBoundingClientRect().top;
target.scrollTo({
top: top,
behavior: 'smooth',
});
Czyli patrze jak daleko od poczatku strony jest moj heading do tego dodaje scrollTop
z kontentu i na koniec odejmuje odleglosc kontentu od poczatku strony. Bede wdzieczny jesli ktos potwierdzi czy jest to poprawne rozwiazanie lub czy moze jest bardziej elegancki sposob