Javascript 水平滚动div作为页面滚动

我尝试在

div

中进行水平滚动。滚动发生在用户滚动页面时。不知何故，我设法滚动了

div

，但它看起来并不令人愉快。我不知道发生了什么错误

让我尽可能多地向您解释UI。我在页面的中间有一个<代码> div <代码>。当用户滚动并到达滚动部分时，它会随着用户滚动从右向左滚动，一旦下一部分出现在视口中，它的水平滚动就会停止。当用户在页面内从下往上移动时，也会发生同样的情况。这是我的代码示例

请帮忙。如果您需要有关该问题的任何其他信息，请在评论中告诉我

$（文档）.ready（函数（）{
var activityContainer=$（“.activities container”）.offset（）.top；
var activityHeight=$（“.activity container”）.css（“height”）；
var activityTotalWidth=parseFloat（$（“.activities节”）.css（“width”）；
var nextSection=$（“.footer容器”）.offset（）.top；
$（窗口）.on（“滚动”，函数（）{
让top=$（this.scrollTop（）；
让scrollOffset=top-activityContainer；
if（top>=activityContainer&&top

。全高{
最小高度：100vh；
}
.flex{
显示器：flex；
柔性包装：包装；
}
.所有中心{
对齐项目：居中；
证明内容：中心；
}
.bg灰色{
背景色：#E3；
}
.bg黑色{
背景色：#333；
}
.活动容器{
溢出：隐藏；
}
.activities容器>.col-md-12{
宽度：180%；
空白：nowrap；
身高：100%；
显示器：flex；
}
.活动箱{
过渡：所有0.3s线性；
宽度：30%；
}
.活动框：非（：最后一个子项）{
右边距：60px；
}
.弯曲方向柱{
弯曲方向：立柱；
}
.水平中心{
证明内容：中心；
}
.白色{
颜色：#fff；
}
.滚动活动{
位置：固定；
顶部：0px；
宽度：100%；
z指数：5；
}
.滚动活动+.行{
边际上限：100vh；
}

我们的活动
标题
Lorep ipsum只是一个虚拟文本。Lorep ipsum只是一个虚拟文本。

标题
Lorep ipsum只是一个虚拟文本。Lorep ipsum只是一个虚拟文本。

标题
Lorep ipsum只是一个虚拟文本。Lorep ipsum只是一个虚拟文本。

标题
Lorep ipsum只是一个虚拟文本。Lorep ipsum只是一个虚拟文本。

标题
Lorep ipsum只是一个虚拟文本。Lorep ipsum只是一个虚拟文本。

标题
Lorep ipsum只是一个虚拟文本。Lorep ipsum只是一个虚拟文本。

scrollmagic很好地处理了相同的代码笔链接，请参见@Doughballs上的我的答案谢谢。我将尝试，但您是否了解我们如何使用vanilla javascript或jquery实现这一点。您可以，但调试您的代码将花费我很长时间-我看到了至少两个问题（1个是跳跃，2个是调整大小），可能还有更多问题。尽管如此，我还是为自己的努力而感到自豪——我并没有让你泄气，这种心态是非常积极的。但是正确地处理固定和取消固定，以及调整大小，这是相当复杂的，这就是为什么我个人会依靠一个包含它的库。我认为解决1号问题意味着将新的scrolltop位置设置为该容器的顶部，如果您还没有这样做的话。scrollmagic很好地处理了代码笔链接，请参阅我在@Doughballs上的回答谢谢。我将尝试，但您是否了解我们如何使用vanilla javascript或jquery实现这一点。您可以，但调试您的代码将花费我很长时间-我看到了至少两个问题（1个是跳跃，2个是调整大小），可能还有更多问题。尽管如此，我还是为自己的努力而感到自豪——我并没有让你泄气，这种心态是非常积极的。但是正确地处理固定和取消固定，以及调整大小，这是相当复杂的，这就是为什么我个人会依靠一个包含它的库。我认为解决1号问题意味着将新的scrolltop位置设置为容器的顶部，如果您还没有这样做的话。