Html 当元素宽度增加时，位置粘滞不适用于水平滚动

我正在尝试使用

位置：sticky

防止元素滚动通过

left:0

。这在某些情况下可以正常工作，但我注意到，如果元素宽度增加，它将停止工作。例如，以下工作：

#标题{
位置：粘性；
左：0；
宽度：50%；
背景色：#888；
}
#页面{
高度：80vh；
宽度：120vw；
背景色：#000；
}

我的心在哪里？

这是一个有趣的问题。我不知道为什么，但是在

周围的容器上放置

溢出：auto

似乎可以解决这个问题

您可以将

height:100vh

添加到容器中，让容器中的内容通过滚动条溢出

正文{
保证金：0；
}
#容器{
溢出：自动；
高度：100vh；
}
#标题{
位置：粘性；
左：0；
宽度：100%；
背景色：#888；
}
#页面{
高度：200vh；
宽度：120vw；
背景：线性梯度（135度，#cc2，#a37）；
}

这是标题。
页面内容在这里。

我现在明白发生了什么。问题在于浏览器处理

的宽度和高度的方式不同。

auto

的默认值意味着

的宽度为

100%

，而高度由内容设置。如果内容宽度大于

100%

，则在水平滚动时，粘滞元素触及容器的末端

，并且由于无法离开容器的限制，因此开始滚动。这与垂直滚动的情况不同，因为默认情况下容器与内容一样高

为了防止这种情况发生，我们必须确保容器

与其内容一样宽。这可以在大多数浏览器（不是Edge或Explorer）中通过在容器样式中包含

width:max content

来实现。或者，正如mfluehr在回答中所建议的，将

溢出：auto

放入创建一个与内容一样宽的新块格式上下文。另一个选项是使用

display:inline block

或

inline flex

等使容器

的宽度基于内容

例如，使用以下两种技术，您可以创建页眉、边栏和页脚，这些页眉、边栏和页脚可以垂直和水平滚动：

正文{
填充：0；
保证金：0；
}
#应用程序{
溢出：自动；
高度：100vh；
}
#标题{
背景：蓝色；
宽度：100%；
高度：40px；
位置：粘性；
排名：0；
左：0；
z指数：10；
颜色：白色；
}
#边栏{
位置：粘性；
背景：绿色；
宽度：200px；
高度：计算（100vh-40px）；
顶部：40px；
左：0；
颜色：白色；
flex-grow:0；
弹性收缩：0；
}
#容器{
显示：内联flex；
}
#内容{
背景:#555；
高度：200vh；
宽度：200vw；
背景：线性梯度（135度，#cc2，#a37）；
flex-grow:0；
弹性收缩：0；
}
#页脚{
背景：#000；
高度：100px；
z指数：100；
左：0；
位置：粘性；
颜色：白色；
}

标题内容
边栏内容
页面内容
页脚内容

有趣而奇怪，因为放置

溢出：auto

似乎可以消除垂直方向的粘性。但是，我希望它能够与body水平滚动一起工作，而不是div有自己的滚动条（如果div比视口高，则可能会在屏幕外显示）。如果将

height:100vh

添加到容器中，我认为溢出滚动可以按照您的需要工作。查看我编辑的答案。很好，通过添加此选项，在标题上放置

top:0

，也可以使其在垂直方向上保持固定。我有点困惑为什么会这样。