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?
  • Najlepsze
  • Wszystkie komentarze
pomarancza_
pomarancza_
Sprawdzałeś overflow-y: auto?
look997
look997 Autor
0
@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_
pomarancza_
@look997: a jakby ten margin dać jakoś do ::before albo ::after elementu z overflowem? Musialbym się pobawić, ale siedzę teraz w pracy ^^"
look997
look997 Autor
0
@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');
pomarancza_
pomarancza_
@look997: W sumie w SASS/SCSS nie powinno być problemu tego zrobić ifami.