Подтвердить что ты не робот

Предотвращение создания 100vw горизонтальной прокрутки

Если для элемента задано значение width: 100vw; и существует вертикальная полоса прокрутки, ширина элемента будет равна области просмотра и ширине полосы прокрутки.

Можно ли предотвратить это?

Можно ли предотвратить это, не отключая горизонтальную прокрутку на всей странице? Помимо изменения моей css/markup, чтобы сделать элемент 100% от ширины тела, я ничего не могу придумать.

Протестировано в Chrome версии 43.0.2357.81 m и FF 36.0.1 и Opera 20.0.1387.91 в Windows 8.1

Вот код по запросу:

Пример

HTML

<div class="parent">
    <div class="box"></div>
</div>
<div class="tall"></div>

CSS

body { margin: 0; }
html { box-sizing: border-box; }
*, *::before, *::after {
    box-sizing: inherit;
    position: relative;
}
.parent {
    background: rgba(0, 0, 0, .4);
    height: 100px;
    width: 5rem;
    margin-bottom: 25px;
}

.box {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .4);
    height: 50px;
    width: 100vw;
}

.tall {
    height: 100rem;
}
4b9b3361

ОТВЕТЫ

Ответ 1

По сути, ответ отрицательный, если у вас вертикальная полоса прокрутки, невозможно сделать 100vw равным ширине видимой области просмотра. Вот решения, которые я нашел для этой проблемы.

предупреждение: я не тестировал эти решения для поддержки браузера

ТЛ; др

Если вам нужен элемент шириной 100% видимого окна просмотра (область просмотра за вычетом полосы прокрутки), вам нужно установить его на 100% основного тела. Вы не можете сделать это с модулями vw, если есть вертикальная полоса прокрутки.

1. Установите все элементы-предки в статическое положение

.Если вы убедитесь, что все предки .box установлены на position: static;, тогда установите .box на width: 100%;, чтобы он составлял 100% ширины тела. Это не всегда возможно, хотя. Иногда вам нужно, чтобы один из предков был position: absolute; или position: relative;.

Пример

2. Переместите элемент за пределы нестатических предков

Если вы не можете установить элементы-предки на position: static;, вам нужно переместить .box за их пределы. Это позволит вам установить элемент на 100% ширины тела.

Пример

3. Удалить вертикальную полосу прокрутки

Если вам не нужна вертикальная прокрутка, вы можете просто удалить вертикальную полосу прокрутки, установив для элемента <html> значение overflow-y: hidden;.

Пример

4. Удалить горизонтальную полосу прокрутки Это не решает проблему, но может подойти для некоторых ситуаций.

Установка элемента <html> на overflow-y: scroll; overflow-x: hidden; предотвратит появление горизонтальной полосы прокрутки, но элемент 100vw будет по-прежнему переполнен.

Пример

Specport-Percentage Lengths Spec

Длина области просмотра в процентах относительно размера начальный содержащий блок. Когда высота или ширина исходного содержащие блоки изменены, они соответственно масштабируются. Тем не мение, если значение переполнения корневого элемента равно auto, любая прокрутка Предполагается, что бары не существуют. Обратите внимание, что начальный, содержащий Размер блоков зависит от наличия полос прокрутки на окно просмотра.

Кажется, что есть ошибка, потому что блоки vw должны включать ширину полосы прокрутки, только если для переполнения установлен корневой параметр auto. Но я попытался установить корневой элемент на overflow: scroll;, и он не изменился.

пример

Ответ 2

Я знаю, что это старый вопрос, но ошибка все еще существует в современных браузерах. Мне не понравилась идея сделать overflow-x: hidden, так что это то, что я сделал. Полный пример доступен здесь: http://codepen.io/bassplayer7/pen/egZKpm

Мой подход состоял в том, чтобы определить ширину полосы прокрутки и использовать calc(), чтобы уменьшить 100vw на величину полосы прокрутки. Это немного сложнее, потому что в моем случае я вытаскивал ширину контента из поля, для которого было определено значение, поэтому мне нужно было также объявить поле.

Несколько замечаний по поводу кода ниже: во-первых, я заметил, что 20px кажется довольно широким магическим числом для полос прокрутки. Я использую переменную SCSS (это не обязательно должен быть SCSS) и код за пределами @supports в качестве запасного варианта.

Кроме того, это не гарантирует, что никогда не будет полос прокрутки. Поскольку для этого требуется Javascript, пользователи, у которых этот параметр не включен, будут видеть горизонтальные полосы прокрутки. Вы можете обойти это, установив overflow-x: hidden, а затем добавив класс для его переопределения при запуске Javascript.

Полный код:

$scroll-bar: 20px;

:root {
    --scroll-bar: 8px;
}

.screen-width {
  width: 100vw;
  margin: 0 calc(-50vw + 50%);

    .has-scrollbar & {
        width: calc(100vw - #{$scroll-bar});
        margin: 0 calc(-50vw + 50% + #{$scroll-bar / 2});
    }

    @supports (color: var(--scroll-bar)) {
        .has-scrollbar & {
            width: calc(100vw - var(--scroll-bar));
            margin: 0 calc(-50vw + 50% + (var(--scroll-bar) / 2));
        }
    }
}

Затем этот Javascript установит пользовательское свойство CSS:

function handleWindow() {
    var body = document.querySelector('body');

    if (window.innerWidth > body.clientWidth + 5) {
        body.classList.add('has-scrollbar');
        body.setAttribute('style', '--scroll-bar: ' + (window.innerWidth - body.clientWidth) + 'px');
    } else {
        body.classList.remove('has-scrollbar');
    }
}

handleWindow();

Как примечание, пользователи Mac могут проверить это, перейдя в Системные настройки → Общие → Показать полосы прокрутки = Всегда

Ответ 3

Положения и границы могут мешать. Так может быть маржа. Используйте box-sizing, чтобы рассчитать ширину, включая эти атрибуты. И, возможно, удалите край (если есть) из ширины.

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    margin: 0; /* interferes with 100vw */
}
.parent {
    width: 100vw;
    max-width: 100%; /* see below */
}
.box {
    width: 100%; /* For those good old-fashioned browsers with no vw or calc() support */
    width: -webkit-calc(100vw - [your horizontal margin, if any]);
    width: -moz-calc(100vw - [your horizontal margin, if any]);
    width: calc(100vw - [your horizontal margin, if any]);
    max-width: 100%
}

Кажется, вам нужно добавить max-width: 100%;, если есть рефлекс, который вызывает появление полосы прокрутки после вычисления начальной ширины окна просмотра. Это, похоже, не происходит в браузерах без препятствующей полосы прокрутки (iOS, OS X, IE 11 Metro), но может влиять на все другие браузеры.

Ответ 4

Я также боролся с этим, и я также думал о переменных CSS как о решении. Переменные CSS не поддерживаются в IE11, хотя я попробовал что-то еще:

Я исправил его, вычислив ширину полосы прокрутки: вычитая ширину body (не включая полосу прокрутки) по ширине window (включая полосу прокрутки). Я использую это, чтобы добавить его в 100% тела, см. Переменную plusScrollBar.

JS:

    // calculate width of scrollbar and add it as inline-style to the body
var checkScrollBars = function() {
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    normalw = window.innerWidth;
    scrollw = normalw - b.width();

    var plusScrollBar = 'calc(' + '100% + ' + scrollw + 'px)'
    document.querySelector('body').style.minWidth = plusScrollBar;
}();

CSS:

html{
    overflow-x: hidden;
}

Почему мне это нравится: следует учитывать, что не все полосы прокрутки имеют одинаковую ширину или вообще считаются сохраненными.:)

Ответ 5

Здесь мое решение проблемы 100vw с добавлением горизонтальной прокрутки:

html {
width: calc(100% + calc(100vw - 100%));
overflow-x: hidden;
}

.box {
width: calc(100% + calc(100vw - 100%));
}

Ответ 6

У меня была та же проблема, и она была исправлена, когда я добавил:

html, body { overflow-y: auto; }

Я добавил комментарий:

/* this fixes a 100vw issue, removing the horizontal scrollbar when it unneeded */

Он работает по крайней мере с Firefox, Chrome, Opera и Internet Explorer 11 (я использовал браузер для IE).

Я не знаю, почему это работает и работает ли оно во всех случаях.

EDIT: Горизонтальная полоса прокрутки исчезла, но я заметил, что она по-прежнему прокручивается по горизонтали с помощью клавиш курсора и сенсорных экранов...

Ответ 7

Элемент с width: 100vw вызывает только горизонтальные полосы прокрутки, когда один из них имеет горизонтальное заполнение. В противном случае он должен хорошо вписываться.

Проверьте эту скрипту: http://jsfiddle.net/1jh1cybc/ .parent2 имеет отступы, из-за которых внутренний .box вырывается из него родительским ширина.

Edit:

В вашем случае, я думаю, ваш body имеет запас. Проверьте этот скрипт с кодом и попытайтесь удалить правило css для тела: http://jsfiddle.net/1jh1cybc/1/

Ответ 8

Вот что я делаю:

div.screenwidth{
    width:100%;  /* fallback for browsers that don't understand vw or calc */
    width: calc(100vw - 17px); /* -17 because vw is calculated without the scrollbar being considered & 17px is width of scrollbars */
    position:relative;  /* use this if the parent div isn't flush left */
    right: calc((100vw - 17px - 100% )/2);

}

Ответ 9

Я исправил это на своем сайте, добавив тело {overflow-x: hidden} к рассматриваемой странице.

Работает и на вашем примере.

Ответ 10

Что ж. Я знаю, что опоздал.

Но вот решение, которое я использую на всех своих страницах, где мне нужно 100vw: Не показывать вертикальные полосы прокрутки.

В любом случае удаление полос прокрутки выглядит намного лучше. По крайней мере, по моему мнению.

Вот что вы делаете:

::-webkit-scrollbar {
  width: 0px;
}

Вот и ты