如何在CSS中設計通知容器？-有解無憂

我有一項任務 - 為某些 Web 應用程式制作通知顯示。通知出現在視窗的右下角，并在一段時間后消失。或者可以通過單擊通知項來消除通知。如果有多個通知，則應將它們堆疊起來。每個新通知都會將通知堆疊向上移動。如果通知堆疊的增長大于視窗的高度，則頂部較舊的通知必須移動到下一個堆疊，該堆疊必須顯示在較新的通知堆疊的左側。同樣，如果第二個堆疊達到視窗的高度，那么最舊的通知應該移動到第三個堆疊。

從示意圖上看，它應該如下所示：如何在 CSS 中設計通知容器？

我能夠獲得顯示通知的正確順序，但我無法將通知容器定位在視窗的右邊緣。

function notify(msg) {
  let element = document.createElement('div');
  element.classList.add('notification');
  element.innerHTML = msg;
  let timeout;
  element.onclick = () => element.remove();
  element.onmouseenter = () => clearTimeout(timeout);
  element.onmouseleave = () => createTimeout();
  createTimeout();
  let recentElement = container.firstElementChild;
  if(recentElement) recentElement.before(element);
  else container.appendChild(element);
  indicator.innerHTML='Last msg is ' msg;
  function createTimeout() {
    timeout = setTimeout(() => { 
      element.remove() 
    }, 10000);
  }
}

let notifyIndex = 0;

x1.onclick = () => {
  notify(  notifyIndex);
}
x10.onclick = () => {
  for (let i = 0; i < 10; i  )
    notify(  notifyIndex);
};
x30.onclick = () => {
  for (let i = 0; i < 30; i  )
    notify(  notifyIndex);
};

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
}
.action-list button {
  width: 4rem;
  margin .5rem
}
#container {
  position: fixed;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  flex-wrap: wrap-reverse;
  align-content: flex-end;
  align-items: flex-end;
  bottom: 0;
  right: 30px;
  max-height: 100vh;
}
.notification {
  transition: all 500ms ease-in-out;
  box-shadow: 0 0 1rem #0004;
  margin: 0 1rem 1rem 0;
  background: #f9f99f;
  color: #000;
  border: 1px solid #0008;
  padding: .2rem 1rem;
  cursor: default;
  user-select: none;
}

<div id="container"></div>

<div>
<div id="indicator">Last msg is 0</div>
<div class="action-list">
  <button id="x1">x1</button>
  <button id="x10">x10</button>
  <button id="x30">x30</button>
</div>
</div>

我設定了 30 像素的縮進，這樣你就可以看到通知越過了視窗的邊緣。這個想法是最近的通知堆疊不應該越過視窗的邊緣。

我究竟做錯了什么？

uj5u.com熱心網友回復：

position: fixed;
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
flex-wrap: wrap-reverse;
align-items: flex-end;
bottom: 0;
right: 30px;
max-height: 100vh;

試試這個，讓我知道它是否有效！

Tldr：您的 Align-content: flex-end 使它向右增長

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/488896.html

標籤：javascript html css 布局通知

上一篇：在react-js中選擇和取消選擇多個div

下一篇：反應js：兒童風格不顯示