Tylko nie display:contents ani nie usunięcie go, bo jest on potrzebny do ResizeObesrver i do dodawania marginesów wewnątrz scrollowanej treści.
Problem jest z:
Dopasowanie 100% szerokości i wysokości, gdy istnieje kontener pośredni.
Zastosowałem width: fit-content; i to działa dla 7, 8, 9, ale nie dla 1 i 3.
Jaki uniwersalny styl, żeby zarówno 7, 8, 9 działało tak jak widać, ale też 1 i 3 działało tak jak w wersji „bez kontenera”?
Próbowałem w 2, 2a, 3, 3b (poprawiane) ale jakby użyć tych poprawek globalnie, to z kolei pozostałe przestają działać tak jak chcę.
Na razie zostaje niedoskonałe ręczne dopasowanie - jak w 5 i 6.
Kod obserwera taki - czyli że jak zmieniają się wymiary treści, to customowe scrolle się dopasowują:
export const resizeOb = (node, detail={})=> {
const ce = new CustomEvent(‘resizeob’, {
detail
});
const ro = new ResizeObserver( (entries) =>
entries.forEach(({target})=>target.isSameNode(node)&&
node.dispatchEvent(ce) ));
ro.observe(node);
}
W tym wypadku obrazek, ale może być tych treści więcej i też w formie tekstowej.
Teoretycznie można ten observer dodać na obrazek i na razie by to wystarczyło… z tym że nie do końca, bo sam obrazek ma być przekazywany do komponentu „Scrollbar”.
Przykład użycia marginesów - białe pole na dole i na górze, scrolle wypozycjonowane jakby były w węższym viewporcie, w wolnych przestrzeniach będą w pozycji absolutnej, pół przeźroczyste paski z przyciskami:
(ten margines jest też pod prawym scrollem, żeby nie zasłaniał)
Czyli wszystko o to, żeby paski z przyciskami były przeźroczyste.
A właściwie - żeby scrollbary były od wewnątrz, a nie na krawędziach kontenera - bo można by uzyskać prześwitywanie obrazka, ale scrolle by musiały być na całej wysokości i szerokości kontenera.
Z tego co wiem, nie da się wylewać treści poza kontener w jakiś sensowny sposób, zachowując scrollowanie?
Jeszcze inaczej - chcę overflow: visible, ale żeby były nadal włączone działające scrollbary, scrollowanie kółkiem myszy itd.
Wtedy ani te myki z marginesami ani ResizeObeserver nie jest potrzebny.
Ani też kontener pośredniczący, czyli cały problem z height/width:100% by zniknął.
