Як зазначено в заголовку, чи можна обчислити vwбез смуг прокрутки лише в css?
Наприклад, мій екран має ширину 1920px. vwповертається 1920px, чудово. Але моя справжня ширина тіла лише щось на зразок 1903px.
Чи є спосіб для мене отримати 1903pxзначення лише за допомогою css (не лише для прямих дочірніх елементів body), чи мені для цього абсолютно потрібен JavaScript?
width: calc(100vw - scrollbarWidth)де 'scrollbarWidth' - це якесь фіксоване значення, таке як 15px
Відповіді:
Один із способів зробити це за допомогою calc. Наскільки мені відомо, 100% - це ширина, включаючи смуги прокрутки. Отже, якщо ви це зробите:
body {
width: calc(100vw - (100vw - 100%));
}
Ви отримуєте 100vw мінус ширина смуги прокрутки.
Ви можете зробити це і з висотою, якщо вам потрібен квадрат, який, наприклад, становить 50% області перегляду (мінус 50% ширини панелі перекладин)
.box {
width: calc(50vw - ((100vw - 100%)/2))
height: 0
padding-bottom: calc(50vw - ((100vw - 100%)/2))
}
bodyелементом або елементом, який має однакову ширину body((інакше 100%буде посилатися на неправильну ширину елемента). У цьому випадку ви можете просто використовувати відсотки. Хіба що мені чогось не вистачає?
100vw - (100vw - 100%) = 100vw - 100vw + 100% = 100% мені щось не вистачає?
Я роблю це, додаючи рядок javascript для визначення змінної CSS після завантаження документа:
document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");
тоді в CSS ви можете використовувати var(--scrollbar-width)будь-які коригування, необхідні для різних браузерів з / без смуг прокрутки різної ширини. Ви можете зробити що - щось подібне для горизонтальної прокрутки, в разі необхідності, заміни innerWidthз innerHeightі clientWidthз clientHeight.
Відповідно до специфікацій , одиниці відносної довжини області перегляду не беруть до уваги смуги прокрутки (а насправді припускають, що вони не існують).
Отже, якою б не була ваша передбачувана поведінка, ви не можете брати до уваги смуги прокрутки при використанні цих одиниць.
vwзгідно специфікації, не відомо про існування будь-якої смуги прокрутки. Тож ви не можете їх врахувати.
overflow-y: scrollvs overflow-y: auto, схоже, не змінюється розраховане значення для одиниць vw. Зокрема, на моєму сайті щось встановлено на рівні 3.82vw, а ширина мого комп’ютера становить 1920px. З автоматичною переповнення, 3.82vw = 73.344px, а потім я спробував із прокруткою переповнення, яка також видає 73.344px, без змін, коли вона насправді повинна видавати 72.6946px, якщо ви були правильними
Веб-переглядачі Webkit виключають смуги прокрутки, інші включають їх у повернуту ширину. Звичайно, це може призвести до проблем: наприклад, якщо ви динамічно генеруєте вміст за допомогою ajax, який динамічно додає висоту, Safari може перейти від макета до іншого під час візуалізації сторінки ... Добре, це трапляється не часто, але це щось бути в курсі. На мобільних пристроях менше проблем, оскільки смуги прокрутки зазвичай не відображаються.
Це сказано, якщо ваша проблема полягає в тому, щоб точно розрахувати ширину області перегляду без смуг прокрутки у всьому браузері, наскільки я знаю, хороший метод такий:
width = $('body').innerWidth();
попередньо встановивши:
body {
margin:0;
}
vwПристрій не приймає overflow-yскроллбар до уваги при overflow-yвстановлено значення auto.
Змініть його на, overflow-y: scroll;і vwодиницею буде вікно перегляду з смугою прокрутки. Тоді ви можете відняти розмір смуги прокрутки від значення vw, використовуючи calc (). Ви також можете визначити ширину смуги прокрутки, щоб вона не залежала від браузера.
Врахувати лише мінус. Якщо вміст вміщується на екрані, панель прокрутки все одно відображається. Можливим рішенням є перехід з autoна scrollна javascript.
overflow-x?
overflow-y: scroll;
Єдиний спосіб, за яким я виявив, що він працює, не переплутуючи ваш код з "calc", - це зробити розмір елемента контейнера 100vw; Додавання обгортки навколо контейнера для overflow-x; Це зробить контейнер повнорозмірним, як якщо б смуга прокрутки знаходилася над вмістом.
<!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>Якби це було щось подібне до повзунка: Як розміщено у багатьох відповідях, ширина 100% не враховує смугу прокрутки, тоді як 100vw це робить. У разі наявності багатьох елементів, які повинні приймати ширину вікна і які вкладені всередину контейнера зі 100% шириною вікна (або чия натуральна ширина блоку була б такою), ви можете використовувати:
100vw = ширина екрану з смугою прокрутки 100% = ширина екрану без смуги прокрутки
Завжди переважно використовувати calc (100% - 50px) під час вимірювання ширини екрану. Навіть у браузерах Windows, де смугу прокрутки видно безпосередньо, поверніть ширину екрана інакше, якщо порівнювати з браузерами macOS.
у моєму випадку у мене є встановити div 100wh - 230px, і я зіткнувся з тією ж проблемою з додатковою шириною прокрутки, що я зробив:
width: calc(100vw - (100vw - 100%) - 230px);
Це не моє рішення, але допомагає мені створити випадаюче меню з повною шириною з абсолютним відносним елементом у не повному обсязі.
Ми повинні отримати прокрутку за допомогою css var в: root, а потім використовувати її.
:root{
--scrollbar-width: calc(100vw - 100%);
}
div { margin-right: var(--scrollbar-width); }