如何为TailwindCSS项目中的红色Div添加弹跳滚动（Bounce Scrolling）效果？

要让红色Div拥有弹跳滚动（边界弹性效果），需要让它成为独立的滚动容器，并确保浏览器原生的弹性滚动行为生效。具体调整如下：

关键修改点 #

• 给红色Div设置固定高度（比如h-full，使其填满父容器高度）
• 添加overflow-y-scroll类，让它成为垂直滚动容器
• 保留默认滚动边界行为（可显式添加overscroll-y-auto类，这也是Tailwind的默认值）

修改后的代码 #

<div class="h-screen w-full flex flex-col items-center justify-center">
    <div class="w-60 h-96 bg-black">
        <!-- 红色Div新增h-full、overflow-y-scroll类 -->
        <div class="w-full h-full bg-red-400 overflow-y-scroll overscroll-y-auto">
            <!-- 需填充足够长的内容触发滚动 -->
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
</div>
<div class="fixed w-screen h-20 bottom-0 bg-slate-400" />

注意事项 #

1. 内容长度：红色Div的内容必须超过其设置的高度，否则无法触发滚动，也就看不到弹跳效果
2. 浏览器支持：弹跳滚动是移动端浏览器（如iOS Safari）的原生行为，桌面端Chrome等需开启实验性设置才能显示效果
3. 避免冲突：不要给红色Div添加overscroll-contain或overscroll-none类，这会直接禁用边界弹性效果

内容的提问来源于stack exchange，提问作者Fabian Friedrich