<header>
  <button>+ Add</button>
</header>

<ul>
  <li>
  </li>
</ul>
@import url("https://fonts.googleapis.com/css2?family=Nova+Mono&display=swap");
@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/gradients.min.css";

body,
html {
  height: 100%;
  font-family: "Nova Mono", monospace;
  background-color: #212121;
}

html {
  margin: 0 16px;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
}

ul {
  display: flex;
  gap: 12px;
  height: 420px;
  overflow-x: scroll;
  width: 100%;
}

header {
  width: 100%;
}

button {
  all: unset;
  text-transform: uppercase;
  color: hsl(0, 0%, 96%);
  letter-spacing: 0.05em;
  padding: 6px 12px;
  border: 1px solid hsl(0, 0%, 96%);
}

.box {
  height: 400px;
  width: 228px;
  border-radius: 8px;
  transition: all 250ms var(--ease-in-out-1);

  @starting-style {
    opacity: 0;
    filter: blur(8px);
  }
}
const box = document.querySelector("ul li .box:first-child");
const list = document.querySelector("ul");
const button = document.querySelector("button");
let index = 1;
button.addEventListener("click", (clickEvent) => {
  const div = document.createElement("div");
  const li = document.createElement("li");
  div.style["background-image"] = `var(--gradient-${index}), var(--noise-5)`;
  index = index >= 30 ? 1 : index + 1;
  div.classList.add("box");
  li.appendChild(div);
  list.appendChild(li);

  // li.scrollIntoView();

  // 获取新添加的li元素在其父元素中的偏移量
  const offsetLeft = li.offsetLeft;
  // 使用scrollTo方法滚动到新添加的li元素
  list.scrollTo({
    left: offsetLeft,
    behavior: "smooth" // 平滑滚动
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.