Javascript Css滚动捕捉开始可见元素位于N

目前，我正在做一个布局，用户可以左右滑动以访问页面上的不同部分。我试图找到一个解决方案，也在官方规范中，但没有成功

我想实现滚动捕捉，其中起始元素是第二（N）个div（.fridge），同时允许左右滑动/捕捉

我更喜欢CSS，但是js没有问题

现在发生的是： 商店（从这里开始）-冰箱-商店

我想要什么 商店-冰箱（从这里开始）-商店 允许我左右滑动

正文{
保证金：0；
}
.水平捕捉{
显示：网格；
网格自动流：列；
宽度：100vw；
高度：100vh；
溢出y：自动；
overscroll-behavior-x：包含；
滚动捕捉类型：x必填；
}
.水平捕捉.滑动{
滚动捕捉对齐：居中；
宽度：100vw；
高度：100vh；
最大宽度：无；
对象匹配：包含；
}
.商店{
背景色：#efdefe；
}
.冰箱{
背景色：#a3f3d3；
}
.食谱{
背景色：#0bbaa0；
}

商店
冰箱
配方

您需要使用Javascript

const-element=document.getElementsByClassName（'fridge'）[0]；
document.getElementsByClassName（'horizontal-snap'）[0].scrollLeft=element.offsetLeft
正文{
保证金：0；
}
.水平捕捉{
显示：网格；
网格自动流：列；
宽度：100vw；
高度：100vh；
溢出y：自动；
overscroll-behavior-x：包含；
滚动捕捉类型：x必填；
}
.水平捕捉.滑动{
滚动捕捉对齐：居中；
宽度：100vw；
高度：100vh；
最大宽度：无；
对象匹配：包含；
}
.商店{
背景色：#efdefe；
}
.冰箱{
背景色：#a3f3d3；
}
.食谱{
背景色：#0bbaa0；
}

商店
冰箱
配方