Javascript 页面的可滚动部分

我想在这个页面上有类似的效果：（页面的一半是可滚动的）

我可以制作一个粘粘的盒子，但有些东西我不知道如何制作，比如文本。文本必须大于框，但如果

溢出：隐藏

，则文本不可滚动。如果是

溢出：scroll

，则仅当鼠标悬停在分区上时才会滚动，但我希望鼠标能够滚动页面上的任何位置

正文{
显示器：flex；
}
.举例{
宽度：50%；
}
.街区{
背景:#888888；
高度：300px；
/*边缘：1米*/
边框：1px纯黑；
}
1号楼{
高度：100px；
}
.盒子{
宽度：100%；
高度：100px；
背景：橙色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
字号：2em；
}
.粘的{
位置：粘性；
顶部：10px；
}
.橙色{
背景：橙色；
}

这是您想要的吗

要创建粘性效果，请使用

位置：sticky

代码：

#包装器{
显示器：flex；
弯曲方向：行；
}
#粘的{
位置：粘性；
职位：-网络工具包粘性；
背景：#f83d23；
宽度：50%；
高度：300px；
排名：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
盒影：0 0 6px#000；
颜色：#fff；
}
#帕拉{
宽度：50%；
利润率：10px；
}

粘性的
这是一个段落

链接您的示例，以便我们进行处理？