Jak wspomniano w tytule, czy można obliczyć vwbez pasków przewijania tylko w CSS?
Na przykład mój ekran ma szerokość 1920px. vwwraca 1920px, świetnie. Ale moja rzeczywista szerokość ciała to tylko coś podobnego 1903px.
Czy istnieje sposób na pobranie 1903pxwartości tylko za pomocą css (nie tylko dla bezpośrednich elementów potomnych body), czy też absolutnie potrzebuję do tego JavaScript?
width: calc(100vw - scrollbarWidth)gdzie „scrollbarWidth” jest jakaś stała wartość jak 15px
Odpowiedzi:
Jednym ze sposobów jest użycie funkcji Calc. O ile wiem, 100% to szerokość, w tym paski przewijania. Więc jeśli to zrobisz:
body {
width: calc(100vw - (100vw - 100%));
}
Otrzymasz 100 vw minus szerokość paska przewijania.
Możesz to zrobić również z wysokością, jeśli chcesz, na przykład, kwadrat stanowiący 50% obszaru roboczego (minus 50% szerokości paska przewijania)
.box {
width: calc(50vw - ((100vw - 100%)/2))
height: 0
padding-bottom: calc(50vw - ((100vw - 100%)/2))
}
bodylub elementem, który ma taką samą szerokość jak body(w przeciwnym razie 100%będzie odnosić się do niewłaściwej szerokości elementu). W takim przypadku możesz po prostu użyć procentów. Chyba że czegoś mi brakuje?
100vw - (100vw - 100%) = 100vw - 100vw + 100% = 100% czy coś mi brakuje?
Robię to, dodając wiersz JavaScript, aby zdefiniować zmienną CSS po załadowaniu dokumentu:
document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");
następnie w CSS możesz użyć var(--scrollbar-width)dowolnych zmian potrzebnych dla różnych przeglądarek z lub bez pasków przewijania o różnych szerokościach. Można zrobić coś podobnego do poziomego paska przewijania, jeśli jest taka potrzeba, zastępując innerWidthz innerHeighti clientWidthz clientHeight.
Zgodnie ze specyfikacją jednostki względnej długości rzutni nie uwzględniają pasków przewijania (i faktycznie zakładają, że nie istnieją).
Zatem niezależnie od zamierzonego zachowania nie możesz brać pod uwagę pasków przewijania podczas korzystania z tych jednostek.
vwzgodnie ze specyfikacją, nie są świadomi istnienia żadnego paska przewijania. Nie możesz więc brać ich pod uwagę.
overflow-y: scrollvs overflow-y: autonie wydaje się zmieniać obliczonej wartości dla jednostek VW. W szczególności mam coś ustawionego w mojej witrynie na 3.82vw, a szerokość mojego komputera to 1920px. Z przepełnieniem auto, 3,82vw = 73,344px, a potem próbowałem z przewijaniem przepełnienia, który również wyświetla 73,344px, bez zmian, kiedy powinien faktycznie wystawić 72,6946px, jeśli miałeś rację
Przeglądarki Webkit wykluczają paski przewijania, inne uwzględniają je w zwracanej szerokości. Może to oczywiście prowadzić do problemów: na przykład, jeśli masz dynamicznie generowaną treść z ajaxem, która dynamicznie dodaje wysokość, Safari może przełączyć się z układu na inny podczas wizualizacji strony ... Ok, nie zdarza się to często, ale jest coś być świadomym. Na urządzeniach mobilnych mniej problemów, ponieważ paski przewijania zwykle nie są wyświetlane.
To powiedziawszy, jeśli twój problem polega na obliczeniu dokładnie szerokości widocznego obszaru bez pasków przewijania we wszystkich przeglądarkach, o ile wiem, dobrą metodą jest to:
width = $('body').innerWidth();
mając wcześniej ustawione:
body {
margin:0;
}
vwJednostka nie ponosi overflow-yprzewijania pod uwagę, gdy overflow-yjest ustawiony auto.
Zmień to na, overflow-y: scroll;a vwjednostka będzie rzutnią z paskiem przewijania. Następnie możesz odjąć rozmiar paska przewijania od wartości vw za pomocą funkcji calc (). Możesz także zdefiniować szerokość paska przewijania, aby była niezależna od przeglądarki.
Jedyny minus do wzięcia pod uwagę. Jeśli treść mieści się na ekranie, pasek przewijania jest wyświetlany mimo to. Możliwym rozwiązaniem jest zmiana z autona scrollw javascript.
overflow-x?
overflow-y: scroll;
Jedynym sposobem, w jaki udało mi się to zadziałać bez mieszania kodu z "calc", jest ustawienie rozmiaru elementu kontenera na 100vw; Dodanie owijki wokół kontenera dla overflow-x; Spowoduje to, że kontener będzie miał pełną szerokość, tak jak gdyby pasek przewijania znajdował się nad zawartością.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html{ overflow-y: scroll; }
html, body{ padding:0; margin: 0;}
#wrapper{ overflow-x: hidden; }
.row{ width: 100vw; }
.row:after{ clear: both; content: ''; display: block; overflow: hidden; }
.row-left{ background: blue; float: left; height: 40vh; width: 50vw; }
.row-right{ background: red; float: right; height: 40vh; width: 50vw; }
</style>
</head>
<body>
<div id="wrapper">
<div class="row">
<div class="row-left"></div>
<div class="row-right"></div>
</div>
</div>
</body>
</html>Gdyby przypadek był podobny do suwaka: Jak napisano w wielu odpowiedziach, szerokość 100% nie uwzględnia paska przewijania, podczas gdy 100vw tak. W przypadku posiadania wielu elementów, które muszą zająć szerokość okna i które są zagnieżdżone w kontenerze o już 100% szerokości okna (lub których naturalna szerokość bloku byłaby taka), możesz użyć:
100vw = szerokość ekranu z paskiem przewijania 100% = szerokość ekranu bez paska przewijania
Podczas pomiaru szerokości ekranu zawsze lepiej jest używać funkcji calc (100% - 50px). Nawet w przeglądarkach Windows, w których pasek przewijania jest widoczny bezpośrednio, szerokość ekranu jest zwracana inaczej w porównaniu z przeglądarkami macOS.
w moim przypadku mam ustawić div 100wh - 230px i napotkałem ten sam problem z dodatkową szerokością przewijania, co zrobiłem:
width: calc(100vw - (100vw - 100%) - 230px);
To nie jest moje rozwiązanie, ale pomaga mi tworzyć rozwijane menu o pełnej szerokości z wartością bezwzględną w elemencie względnym bez pełnego zakresu.
Powinniśmy uzyskać scroll z w css var in: root, a następnie go użyć.
:root{
--scrollbar-width: calc(100vw - 100%);
}
div { margin-right: var(--scrollbar-width); }