css - 转换后可靠地对齐屏幕边缘的一个元素

Question

所以我正在尝试创建一个纯 css 视差效果。它工作得很好，除了有一个视差元素我需要可靠地贴在 View 空间的右边缘。在翻译和缩放之后，这被证明是......有问题的。你可以看到我的精简版here ，其中蓝色元素应位于屏幕的右边缘。

我尝试了多种变体的定位和边距，但都没有成功。还尝试了一些 translateX 但这也不是万无一失的解决方案，因为它似乎是基于元素大小。

这里最重要的细节是蓝色 block 和青色 block 都将具有可交互的内容。蓝色 block 在顶部(z-index)，因此具有整页大小容器的青色 block 不是问题，但我不能对蓝色 block 做同样的事情，不幸的是否则会解决问题like I have here .

*{
  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 使蓝色 block 保持在最右侧？

Answer 1

您有 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。

另一个问题与内容高于主体时出现的滚动条有关。不幸的是，我不知道这个问题的好的解决方案，因为不同浏览器的滚动条宽度不一样