在 Firefox 中，动画元素在父容器之外不可见

Question

我有一个动画 div，它飞到视口的右上角。

但是，由于 overflow 属性，它在 Firefox 的父容器之外不可见。它在 Chrome 中完全可见。

Firefox 中滚动条后面的元素：

Chrome 中父元素的正确上方：

如何让它在 Firefox 中也能正常工作？如果从.container 中删除overflow-y: auto，则问题不会再出现，但这不是一个可行的解决方案，因为我需要可滚动的内容。

这是一个例子。您可以检查它是否在 Chrome 中产生了所需的行为，但在 Firefox 中却没有：

.app {
  overflow: hidden;
}

.container {
  width: 260px;
  max-height: 400px;
  background: blue;
  left: 10px;
  right: 10px;
  top: 10px;
  position: fixed;
  z-index: 500;
  overflow-y: auto;
}


.wrapper {
  height: 250px;
  padding: 10px;
  margin: 5px;
  background: yellow;
  top: 5px;
  position: sticky;
}

.content {
  height: 600px;
  margin: 5px;
  background: orange;
}



@keyframes fly-to-top {
  10% {
    top: 150px;
    right: 80%;
    width: 50px;
  }

  30% {
    top: 120px;
    right: 70%;
    width: 45px;
  }

  60% {
    top: 75px;
    right: 40%;
    width: 40px;
  }

  100% {
    top: 10px;
    right: 160px;
    width: 35px;
  }
}


.animated {
  position: fixed;
  right: unset;
  top: 165px;
  width: 50px;
  background: red;
  color: white;
  animation: fly-to-top linear 2s forwards;
  display: flex;
  align-items: flex-start;
}

<div class="app">
  <div class="container">
    <div class="wrapper">
      <div class="animated">
        Text
      </div>
    </div>
    <div class="content">
      Lorem ipsum
    </div>
  </div>
</div>

Answer 1

试试这个解决方案：

1. .wrapper 位置设置为固定
2. .content 向下移动 transform: translateY()
3. 在.wrapper 类中，我添加了pointer-events: none;，因为 如果光标位于没有此属性的 .wrapper 块上，则鼠标 滚轮不能滚动内容，只有在拖动时才能滚动 滚动条。

.app {
  overflow: hidden;
}

.container {
  width: 260px;
  max-height: 400px;
  background: blue;
  left: 10px;
  right: 10px;
  top: 10px;
  position: fixed;
  z-index: 500;
  overflow-y: auto;
}

.wrapper {
  display: flex;
  height: 250px;
  padding: 10px;
  margin: 5px;
  background: yellow;
  /* top: 5px; */

  position: fixed; /* changed */
  /* calculate '.container' width - scroll-track-width(12px-17px) - '.wrapper' padding(left, right) - margin(left, right) */
  width: calc(260px - 12px - 20px - 10px);
  z-index: 5;
  pointer-events: none; /* mouse wheel work with this property */
}

.content {
  height: 600px;
  margin: 5px;
  background: orange;
  /* calculate '.wrapper' properties to shift '.content' down  */
  /* height + padding(top, bottom) + margin-bottom */
  transform: translateY(calc(250px + 20px + 5px));
}

@keyframes fly-to-top {
  10% {
    top: 150px;
    right: 80%;
    width: 50px;
  }

  30% {
    top: 120px;
    right: 70%;
    width: 45px;
  }

  60% {
    top: 75px;
    right: 40%;
    width: 40px;
  }

  100% {
    top: 10px;
    right: 160px;
    width: 35px;
  }
}

.animated {
  position: fixed;
  right: unset;
  top: 165px;
  width: 50px;
  background: red;
  color: white;
  animation: fly-to-top linear 2s forwards;
  display: flex;
  align-items: flex-start;
  z-index: 100;
}

<div class="app">
  <div class="container">
    <div class="wrapper">
      <div class="animated">
        Text
      </div>
    </div>
    <div class="content">
      Lorem ipsum
    </div>
  </div>
</div>

Answer 2

评论后编辑：

您可以将动画元素从其父元素（即具有overflow: hidden 的元素）中取出，在 HTML 代码的更高级别 - 作为容器的兄弟。我在下面的 sn-p 中这样做了，还添加了一个 z-index 将动画元素放在容器上方：

.app {
  overflow: hidden;
}

.container {
  width: 260px;
  max-height: 400px;
  background: blue;
  left: 10px;
  right: 10px;
  top: 10px;
  position: fixed;
  z-index: 500;
  overflow-y: auto;
}

.wrapper {
  height: 250px;
  padding: 10px;
  margin: 5px;
  background: yellow;
  top: 5px;
  position: sticky;
}

.content {
  height: 600px;
  margin: 5px;
  background: orange;
}

@keyframes fly-to-top {
  10% {
    top: 150px;
    right: 80%;
    width: 50px;
  }
  30% {
    top: 120px;
    right: 70%;
    width: 45px;
  }
  60% {
    top: 75px;
    right: 40%;
    width: 40px;
  }
  100% {
    top: 10px;
    right: 160px;
    width: 35px;
  }
}

.animated {
  position: fixed;
  right: unset;
  top: 165px;
  width: 50px;
  background: red;
  color: white;
  animation: fly-to-top linear 2s forwards;
  display: flex;
  align-items: flex-start;
  z-index: 501;
}

<div class="app">
  <div class="container">
    <div class="wrapper">
    </div>
    <div class="content">
      Lorem ipsum
    </div>
  </div>
  <div class="animated">
    Text
  </div>
</div>