顺风——使列独立滚动

Question

我使用Tailwind在一般应用程序布局中创建两列子布局。两个列理论上都可以溢出父div的高度，所以我希望它们滚动。然而，到目前为止，我只能让它们一起滚动。我想让它们独立滚动，但我还没能想出如何做到这一点。

父组件:

<div className="flex flex-col h-screen md:pl-64">
<div className="sticky top-0 z-10 flex h-16 flex-shrink-0 bg-neutral-600 bg-opacity-50 backdrop-blur-3xl">
...
</div>
<main className="overflow-auto">
<Routes>
<Route path="desk" element={<Desk />} />
<Route path="messaging/*" element={<Messaging />} />
</Routes>
</main>
</div>

消息传递组件:

<div className="flex">
<div className="w-1/3">
<ThreadsPanel header={false} full={true} rounded={false} />
</div>
<div className="w-2/3">
<Routes>
<Route path=":thread" element={<ThreadMessages />} />
</Routes>
</div>
</div>

Answer 1

这可以通过在消息传递组件div

中使用overflow-y: scroll;

来完成例如try:

<div style="overflow-y: scroll;" className="flex">
<div className="w-1/3">
<ThreadsPanel header={false} full={true} rounded={false} />
</div>
<div className="w-2/3">
<Routes>
<Route path=":thread" element={<ThreadMessages />} />
</Routes>
</div>
</div>

Answer 2

确保html,body和任何其他子元素具有height:100%或h-full类。

注意main有h-full类。

然后将overflow-auto类应用于每个可滚动部分。

const insertElements = (parent, num = 60) => {
for (let i = 0; i < num; i++) {
const newLi = document.createElement("li");
newLi.appendChild(document.createTextNode(`Item number ${i+1}`));
parent.insertAdjacentElement('beforeend', newLi);
}
}

document.querySelectorAll('.main > .list').forEach((col) => {
insertElements(col);
})

html,
body {
height: 100%;
}

<script src="https://cdn.tailwindcss.com"></script>
<main class="main flex h-full">
<ul class="list flex-1 overflow-auto"></ul>
<ul class="list flex-1 overflow-auto"></ul>
</main>