元素在 Chromium 浏览器中悬停时滚动到顶部-解网

问：

在我的 TailwindCSS 中，我有这个模板

<script src="https://cdn.tailwindcss.com"></script>

<div class="h-screen min-h-screen ">
    <div class="flex max-h-full">
        <div class="flex">
            <div class="flex flex-col-reverse overflow-auto">
                <div class="flex justify-end h-full max-h-full">
                    <div class="flex items-center group">
                        <div class="bg-gray-500 h-[2000px]">Hover here from a little down</div>
                        <div class="opacity-10 group-hover:opacity-100">Element of Group</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这应该将所有元素移动到页面底部，从这一点开始，我应用悬停效果来转向 .opacity-10opacity-100

我的观察和试验结论是，模板必须具有：

确切的班级，而高度非常高。.group
高度必须高于我的最大屏幕分辨率高度。（对此存疑）*
群效应发生在或时。（背景没有）opacitydisplayfont-size*
浏览器必须是基于 Chromium 的。（在Firefox中不会出现）

我能够使用模板重现异常行为，并在 Snippet 中对其进行了测试。

它应该是许多块而不是.grouph-[2000px]
模板的想法是在父级上有多个 with，同时将滚动条保持在底部 动态追加。.groupflex-col

我希望了解这种行为。如果您偶然发现它，解决方案是使用，或者您可以使用初始等于背景和悬停效果到您想要的颜色position: absolutecolor

css flexbox 顺风-css chromium

元素在 Chromium 浏览器中悬停时滚动到顶部

Element scrolls to the top on hover in Chromium browsers

评论