Надежно выровнять один элемент по краю экрана после преобразования - PullRequest
Новая
       29

Надежно выровнять один элемент по краю экрана после преобразования

0 голосов
/ 11 мая 2018

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

Я пробовал позиционирование и маржу в нескольких вариантах, но не повезло.Также попробовал немного translateX, но это тоже не пуленепробиваемое решение, так как похоже, что оно основано на размере элемента.

Самая важная деталь здесь - это то, что у блока Blue и блока Teal будет интерактивное содержимое.Синий блок находится сверху (z-index), поэтому блок teal с контейнером полного размера страницы не является проблемой, но я не могу сделать то же самое для синего блока, который, к сожалению, в противном случае решил бы проблему как у меня здесь .

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.box{
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.main{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
.content{
  width:200px;
  background:cyan;
  margin:0 auto;
  height:1200px;
}
.stuck{
  height:100px;
  width:100px;
  background:blue;
  position:absolute;
  right:0;
  top:20%;
  transform: translateZ(-4px) scale(5);
}
<div class="box">
  <div class="main"><div class="content">Test<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Test</div></div>
  <div class="stuck"></div>
</div>

Как заставить этот синий блок оставаться в крайнем правом положении, используя только CSS?

1 Ответ

0 голосов
/ 16 мая 2018

У вас есть 2 разные проблемы, которые вам нужно решить.

Первая, исправляющая преобразование, решается в этом фрагменте (см. На полной странице): 

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.box{
  perspective: 1px;
  height: 95vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.main{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
.content{
  width:200px;
  background:cyan;
  margin:0 auto;
  height:95%;
}
.stuck{
  height:100px;
  width:100px;
  background:lightblue;
  border: solid 1px blue;
  position:absolute;
  right:0;
  top:20%;
  transform: translateX(200vw) translateX(-200%) translateZ(-4px)  scale(5);
}
<div class="box">
  <div class="main"><div class="content">Test<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Test</div></div>
  <div class="stuck"></div>
</div>

Применено 2 исправления

  • translateX (-200%) исправляет увеличение.Поскольку масштаб равен 5, поле будет на 400% шире, и нам нужно исправить половину этого значения, расположенного справа.
  • translateX (200vw) исправляет перевод перспективы.так как значение перспективы составляет 1px, а перемещение z - 4px, правая граница, которая была при + 50vw, переместилась в 4 * 50vw = 200vw.

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

...