[look997]

#frontend #webdev #css #html #javascript
Potrzebuję zachowania jak przy overflow-y: scroll - ALE - gdy scroll niepotrzebny, to nie ma być widoczny nieaktywny scrollbar, tylko ma pozostać przeźroczysty margines o szerokości scrollbara.
Da się to zrobić samym CSS i HTML? Jak?

[pomarancza_]

Sprawdzałeś overflow-y: auto?

[look997]

@pomarancza_: To jest domyślne zachowanie. Scrollbar wtedy pojawia się i znika, ale jak znika, to nie zajmuje miejsca, treść zmienia przez to szerokość.
Dlatego chcę coś, co pozostawi margines szerokości scrollbar-a, gdy scrollbar znika.

Mogę obserwować czy treść się "przelewa" i dodawać ten margines dynamicznie, gdy znika scrollbar. Metoda pobrania szerokości scrollbara też jest mi znana.

Ale pytam o rozwiązanie bez JS.

[pomarancza_]

@look997: a jakby ten margin dać jakoś do ::before albo ::after elementu z overflowem? Musialbym się pobawić, ale siedzę teraz w pracy ^^"

[look997]

@pomarancza_: W JS mam takie coś, no ale chodzi czy da się bez JS i ewentualnie trzeba by zgłosić dodatkowe właściwości do CSS overflow, np. overflow: auto-margin;, która by robiła to samo. Nie wykluczone że podobna propozycja gdzieś istnieje, tylko nie znam nazwy.

function getScrollbarWidth () {
 // Creating invisible container
 const outer = document.createElement('div');
 outer.style.visibility = 'hidden';
 outer.style.overflow = 'scroll'; // forcing scrollbar to appear
 outer.style.msOverflowStyle = 'scrollbar'; //

[pomarancza_]

@look997: W sumie w SASS/SCSS nie powinno być problemu tego zrobić ifami.