在Firefox中，影片元素在父容器之外不可見

在 Chrome 中正確位于父級上方的元素：

我怎樣才能讓它在 Firefox 中也能作業？如果overflow-y: auto從.container問題中洗掉不再出現，但這不是一個可行的解決方案，因為我需要可滾動的內容。

這是一個例子。您可以檢查它是否在 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>

uj5u.com熱心網友回復：

評論后編輯：

您可以在 HTML 代碼的更高級別上將影片元素從其父元素（即具有 的元素overflow: hidden）中取出 - 作為容器的兄弟元素。我在下面的代碼片段中做到了這一點，還添加了一個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>

uj5u.com熱心網友回復：

試試這個解決方案：

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>

標籤：

上一篇：從AWSS3下載檔案訪問被拒絕

下一篇：WebdriverIO：使用默認運行程式（devtools：puppeteer）找不到Firefox瀏覽器的可執行檔案