英文:
TailwindCSS: Scrollable central panel being covered by footer component on mobile
问题
我有三个主要组件：
- 头部
- 可滚动的主面板
- 底部
在网页上使用上面的代码（如上面的链接所示）很容易实现这个效果，但是在移动设备上，主面板的行为表现得很奇怪，比如在这个视频中，底部部分被底部导航栏遮挡，并且出现了奇怪的滚动行为。第一次滚动是我想要的，它可以滚动超出容器的内容。但是第二次滚动（当我在侧边滚动时），整个面板组件会上下移动。
英文:
https://play.tailwindcss.com/notWWuhDpr?size=546x752
I have three main components:
- header
- main panel that's scrollable
- footer
It was fairly simple to make this work in web with the code above (as shown in above link), but the main panel acts weirdly on mobile such as in this video, where bottom portion is covered by the bottom navbar with an odd scroll behavior. The first scroll is what I intend, where it scrolls through overflowed content. But the second scroll (when I scroll on the side edge) the entire panel component moves up and down.
答案1
得分: 1
我不确定你所说的“表现奇怪”是指什么。但我认为最好是让整个屏幕为你的元素腾出空间，而不是使用固定的变量作为页脚，就像这样Tailwind预览：
<div class="flex h-screen flex-col">
<div class="flex-none">
<div class="m-4 flex w-[calc(100vw-2rem)] space-x-2 rounded-lg bg-gray-300 p-4 shadow-md">Header</div>
</div>
<div class="flex-grow overflow-hidden">
<div class="m-4 rounded-t-lg bg-white shadow-lg">
<div class="mx-auto max-w-2xl p-6">
<!-- mainpanel -->
<div class="h-[calc(100vh-15rem)] overflow-y-scroll">
<text class="text-5xl"> Lorem ipsum orem ipsumorem ipsumorem ipsupsumorem ipsumorem ipsupsumorem ipsumorem ipsumorem ipsumorem ipsumoremorem ipsumorem ipsumorem ipsumorem ipsumoremorem ipsumorem ipsumorem ipsumorem ipsumorem ipsumorem ipsumorem ipsumorem ipsum{" "} </text>
<textarea>asdf</textarea>
</div>
</div>
</div>
</div>
<footer class="m-4 mt-0 w-[calc(100vw-2rem)] rounded-b-lg border-t-2 border-gray-200 bg-gray-300 shadow-lg">
<div class="flex items-center justify-center space-x-4 p-4">
<button class="btn-solid h-10 w-32 disabled:cursor-not-allowed disabled:bg-gray-100">hello</button>
</div>
</footer>
</div>
至于滚动部分，我看到在移动视图中字体大小相当大，因此超出了视口范围，这会添加一个X方向的滚动条，对大多数用户来说并不直观。
因此，我建议在移动视图中使用较小的字体大小，将text-5xl更改为text-3xl md:text-5xl，这样只有在有足够空间时才会使用这个大字体。
希望这能帮助你找到正确的方向。祝你有美好的一天！
英文:
I am not sure what you are referring to as "acts weirdly". But I do think it's better to have the entire screen make room for your elements instead of using a fixed variable for the footer as such Tailwind preview:
<div class="flex h-screen flex-col">
<div class="flex-none">
<div class="m-4 flex w-[calc(100vw-2rem)] space-x-2 rounded-lg bg-gray-300 p-4 shadow-md">Header</div>
</div>
<div class="flex-grow overflow-hidden">
<div class="m-4 rounded-t-lg bg-white shadow-lg">
<div class="mx-auto max-w-2xl p-6">
<!-- mainpanel -->
<div class="h-[calc(100vh-15rem)] overflow-y-scroll">
<text class="text-5xl"> Lorem ipsum orem ipsumorem ipsumorem ipsupsumorem ipsumorem ipsupsumorem ipsumorem ipsumorem ipsumorem ipsumoremorem ipsumorem ipsumorem ipsumorem ipsumoremorem ipsumorem ipsumorem ipsumorem ipsumorem ipsumorem ipsumorem ipsumorem ipsum{" "} </text>
<textarea>asdf</textarea>
</div>
</div>
</div>
</div>
<footer class="m-4 mt-0 w-[calc(100vw-2rem)] rounded-b-lg border-t-2 border-gray-200 bg-gray-300 shadow-lg">
<div class="flex items-center justify-center space-x-4 p-4">
<button class="btn-solid h-10 w-32 disabled:cursor-not-allowed disabled:bg-gray-100">hello</button>
</div>
</footer>
</div>
For the other part with the scroll, I see that the font size is quite large in the mobile view and therefore go outside viewport, which adds a scroll direction X, which for most users is not intuitive.
I would therefore recommend you to have a smaller fort size for mobile view by changing the text-5xl to maybe a text-3xl md:text-5xlso that this large font scaling only kicks in when it has room for it.
I hope that this can help you onto the right path. Have a great day!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论