固定在左侧的位置不适用于水平滚动

Question

我有一个带有水平滚动条的 100vh html 页面。我需要在左侧固定一个 div，但它不适用于 position: fixed.

这是我的例子：

<div class="wrapper">
  <div class="container">
    <div class="scroll">
      <div class="fixed">
      
      </div>
    </div>
  </div>
</div>

.wrapper {
    height: 300px;
    transform: rotate(-90deg) translateX(-100vh);
    transform-origin: top left;
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
    .container {
        width: 1000px;
        transform: rotate(90deg) translateY(-100vh);
        transform-origin: top left;
        background-color: grey;
        .scroll {
          height: 300px;
          .fixed {
            position: fixed;
            width: 100px;
            height: 100%;
            background: red
          }
        }
    }
}

如果您尝试在 div 内使用鼠标滚轮，则固定的 div 不起作用。

谢谢！

Answer 1

您使用的括号不正确。你应该打开{然后输入代码然后关闭它}

这是如何编写自己的代码。

.wrapper {
    height: 300px;
    transform: rotate(-90deg) translateX(-100vh);
    transform-origin: top left;
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
}
.container {
    width: 1000px;
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;
    background-color: grey;
}
.scroll {
    height: 300px;
}
.fixed {
    position: fixed;
    width: 100px;
    height: 100%;
    background: red
}