Javascript HTML&；CSS：在Y轴上滚动，但在X轴上保持不变

我有一个

main

div，它在

wrapper

中，可以滚动。现在我想在

main

div的左侧有一个

left

div。我想让Y轴与

main

div一起滚动，但是当我水平滚动时，它应该粘在“包装器”的左侧

我希望这是有道理的

到目前为止，我有：

.wrapper{
位置：相对位置；
背景颜色：浅灰色；
宽度：500px；
高度：500px；
利润率：100像素；
溢出：滚动；
}
.左{
位置：绝对位置；
宽度：100px；
身高：100%；
左：0；
背景：轻鲑鱼；
}
梅因先生{
位置：相对位置；
宽度：1000px；
高度：1000px；
背景色：玫瑰色；
}

左边
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。在以下情况下，对真实性的赞扬是可行的，但不包括对真实性的尊重和对真实性的尊重。

这就是你想要的吗

使用块模型：

.wrapper{
位置：相对位置；
背景颜色：浅灰色；
宽度：500px；
高度：500px；
利润率：100像素；
}
.wrapper>div{
显示：内联块；
浮动：左；
}
.左{
宽度：100px；
身高：100%；
背景：轻鲑鱼；
}
.主包装{
宽度：400px；
高度：500px；
溢出：自动；
}
梅因先生{
宽度：1000px；
高度：1000px；
背景色：玫瑰色；
}

左边
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。在以下情况下，对真实性的赞扬是可行的，但不包括对真实性的尊重和对真实性的尊重。

这就是你想要的吗

使用块模型：

.wrapper{
位置：相对位置；
背景颜色：浅灰色；
宽度：500px；
高度：500px；
利润率：100像素；
}
.wrapper>div{
显示：内联块；
浮动：左；
}
.左{
宽度：100px；
身高：100%；
背景：轻鲑鱼；
}
.主包装{
宽度：400px；
高度：500px；
溢出：自动；
}
梅因先生{
宽度：1000px；
高度：1000px；
背景色：玫瑰色；
}

左边
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。在以下情况下，对真实性的赞扬是可行的，但不包括对真实性的尊重和对真实性的尊重。

您可以使用固定菜单来实现这一点。检查答案。我想这就是你要找的。因为左边的条是固定的，剩下的会碰到它。因此，您需要将干管与右侧对齐

.wrapper{
位置：相对位置；
背景颜色：浅灰色；
宽度：500px；
高度：500px；
/*利润率：100像素*/
溢出：滚动；
}
.左{
位置：固定；
宽度：100px；
身高：100%；
左：0；
背景：轻鲑鱼；
}
梅因先生{
位置：相对位置；
宽度：1000px；
高度：1000px；
背景色：玫瑰色；
左边距：100px；
}

左边
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。在以下情况下，对真实性的赞扬是可行的，但不包括对真实性的尊重和对真实性的尊重。

您可以使用固定菜单来实现这一点。检查答案。我想这就是你要找的。因为左边的条是固定的，剩下的会碰到它。因此，您需要将干管与右侧对齐

.wrapper{
位置：相对位置；
背景颜色：浅灰色；
宽度：500px；
高度：500px；
/*利润率：100像素*/
溢出：滚动；
}
.左{
位置：固定；
宽度：100px；
身高：100%；
左：0；
背景：轻鲑鱼；
}
梅因先生{
位置：相对位置；
宽度：1000px；
高度：1000px；
背景色：玫瑰色；
左边距：100px；
}

左边
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。在以下情况下，对真实性的赞扬是可行的，但不包括对真实性的尊重和对真实性的尊重。
我想
：粘性
正是你想要的。（有点）

更新：根据需要添加了
.top


.wrapper{
位置：相对位置；
背景颜色：浅灰色；
宽度：500px；
高度：500px；
利润率：100像素；
溢出：滚动；
}
梅因先生{
宽度：1000px；
高度：1000px；
背景色：玫瑰色；
显示器：flex；
弯曲方向：立柱；
}
.main.top{
位置：粘性；
排名：0；
z指数：1；
背景色：桑迪布朗；
}
.main.中{
显示器：flex；
柔性生长：1；
弯曲方向：行；
}
.main，中，左{
位置：粘性；
宽度：100px；
左：0；
背景：轻鲑鱼；
}

顶部
左边
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。在以下情况下，对真实性的赞扬是可行的，但不包括对真实性的尊重和对真实性的尊重。
我想
：粘性
正是你想要的。（有点）

更新：根据需要添加了
.top


.wrapper{
位置：相对位置；
背景颜色：浅灰色；
宽度：500px；
高度：500px；
利润率：100像素；
溢出：滚动；
}
梅因先生{
宽度：1000px；
高度：1000px；
背景色：玫瑰色；
显示器：flex；
弯曲方向：立柱；
}
.main.top{
位置：粘性；
排名：0；
z指数：1；
背景色：桑迪布朗；
}
.main.中{
显示器：flex；
柔性生长：1；
弯曲方向：行；
}
.main，中，左{
P