为何以body为滚动容器时left粘性定位无法生效？

我分别测试了以div和body作为滚动容器的场景，发现当容器为body时，position: sticky的left: 0设置无法正常生效，仅top: 0能正常工作。我希望继续使用body作为滚动容器，因为使用div容器会导致移动端功能失效（如下滑隐藏搜索栏）。

测试示例 #

以body为容器，无法正常工作 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="margin: 0">
    <div style="background-color: blue; height: 100px; position: sticky; left: 0">
        TEST
    </div>
    <div style="height: 1000px; width: 1000px; background-color: red">
        TEST
    </div>
</body>
</html>

以div为容器，可正常工作 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="margin: 0">
    <div style="height: 100dvh; overflow: auto">
        <div style="background-color: blue; height: 100px; position: sticky; left: 0">
            TEST
        </div>
        <div style="height: 1000px; width: 1000px; background-color: red">
            TEST
        </div>
    </div>
</body>
</html>

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