<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" // 平滑滚动
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.