Разрыв, созданный полосой прокрутки в сайтах прокрутки параллакса CSS - PullRequest
Новая
       37

Разрыв, созданный полосой прокрутки в сайтах прокрутки параллакса CSS

0 голосов
/ 06 июля 2018

Я большой поклонник техники чистого параллакса Кейта Кларка и с некоторым успехом использую ее на одном из своих сайтов. Однако недавно я заметил, что фоновые элементы параллакса даже в его собственной демоверсии не упираются в левую сторону экрана, но оставляют зазор, размер которого зависит от того, как далеко назад в 3D пространство, которое они представляют.

Виновником, насколько я могу судить, является полоса прокрутки. Эта полоса прокрутки должна быть там (внутри div родительского параллакса), но она создает разницу между размером родительского контейнера (в котором отображается трехмерное пространство) и размером параллакса контейнеров дети, что оставляет место для этого разрыва. Я вижу это в последних версиях Chrome, Firefox и Safari (хотя я мог поклясться, что не видел его там даже год назад).

Это можно исправить, применив правило width: 100vw к каждой группе или слою параллакса. Но хотя это очищает пробел, оно размещает элементы вне выравнивания с центром вида по умолчанию (и так с любыми элементами, к которым также не применено правило 100vw). Я также хотел бы, чтобы решение, которое максимально поддерживало принцип «чистого CSS».

HTML взят из примера Кейта Кларка: 

<div class="parallax">
  <div class="parallax__group">
    <div class="parallax__layer parallax__layer--base">
      <div>Base Layer</div>
    </div>
    <div class="parallax__layer parallax__layer--back">
      <div>Background Layer</div>
    </div>
  </div>
</div>

CSS: 

.parallax { // parent, page-level container
    height: 500px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-perspective: 300px;
    perspective: 300px;
    -webkit-perspective-origin-x: 100%;
    perspective-origin-x: 100%;
}

.parallax__group {
    position: relative;
    height: 500px;
    height: 100vh;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.parallax__layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform-origin-x: 100%;
    transform-origin-x: 100%;
}

.parallax__layer--base {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 4;
}

.parallax__layer--back {
    -webkit-transform: translateZ(-300px) scale(2);
    transform: translateZ(-300px) scale(2);
    z-index: 3;
}

1 Ответ

0 голосов
/ 07 июля 2018

Я придумал несколько решений и поместил их на пример веб-сайта здесь: https://dawaltconley.github.io/parallax-gap-fix/.

Кажется, что проблема возникает только с определенными полосами прокрутки системы Mac, которые появляются, когда пользователь подключает USB-мышь (как я их нашел) или меняет Show scroll bars на Always в своих настройках. Эта полоса прокрутки, в отличие от прозрачного трекпада, изменяет внутреннюю ширину элемента страницы параллакса, но не общий размер, в котором отображается трехмерное пространство для элементов параллакса.

Изменение свойств perspective-origin и transform-origin на left перераспределяет элементы параллакса без изменения размера. Это было бы идеальным решением, за исключением того, что Safari, похоже, рассчитывает трехмерное пространство не так, как большинство современных браузеров, и ему нужно, чтобы эти свойства были установлены на center для правильного выравнивания.

Лучшее решение, которое я нашел для всех браузеров, - добавить следующие элементы к элементу .parallax__group: 

.parallax__group {
    margin-left: calc(100% - 100vw);
    margin-right: calc(100% - 100vw);
    padding-left: calc(100vw - 100%);
    padding-right: calc(100vw - 100%);
}

Разница между 100vw и 100% от любого непосредственного потомка элемента .parallax заключается в ширине полосы прокрутки. Установка отрицательного правого поля для этой ширины расширяет элементы параллакса до той же ширины, что и страница, удаляя зазор по краю экрана. Установка этого значения в левое поле растягивает элементы немного больше, чем необходимо, но это необходимо для выравнивания центра трехмерного пространства с центром остальной части страницы.

Должна быть возможность компенсировать это раздувание, применяя аналогичные правила к классу .parallax__layout, но несоответствия в Safari затрудняют это, так как не раздутый элемент должен быть идеально выровнен , чтобы избежать пробелов в макете.

Кстати, это решение имеет то преимущество, что ничего не делает, когда проблемные полосы прокрутки отсутствуют. В этом случае нет никакой разницы между 100vw и 100%, поэтому вычисленный стиль идентичен стилю Киет Кларк.

...