Javascript 停止在浏览器调整大小时水平移动div

我正在尝试创建一个具有多个div的布局，所有div的宽度和高度都相同。所有div的宽度均为100vw。问题是，当我调整浏览器窗口的大小时，如果最初的div no 5位于中间，它会移动，而其他一些div会落在中间

我尝试使用onresize事件并将容器元素的scrollLeft更改为 container\u scrollLeft=当前的\u div\u索引*一个\u div的宽度\u，但由于不断操纵scrollLeft，这会导致不稳定的行为

.container{
-webkit框大小：边框框；
框大小：边框框；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-ms flex项目对齐：开始；
大纲：无；
-webkit溢出滚动：触摸；
-ms溢出样式：无；
溢出-x：滚动；
溢出y：隐藏；
overflow-y:-moz隐藏不可滚动；
宽度：100%；
}
.第页{
对齐项目：居中；
显示器：flex；
身高：100%；
证明内容：中心；
最小宽度：100%；
位置：相对位置；
宽度：100vw；
框阴影：插入0 20px#000000；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10

这不是当前设置的解决方案，但您可能需要重新考虑。到目前为止，用户最讨厌的是水平滚动。想想看。您的鼠标滚轮允许轻松垂直滚动，但不允许水平滚动。为什么不一次只显示一个占据整个浏览器宽度的div，然后提供“上一个|下一个”按钮，将显示的div替换为另一个div，因此，只有一个div需要处理。@ScottMarcus我同意水平滚动不是最好的事情，但实际上我正在创建一种图书阅读器，在这种阅读器中，每一页在同一时间都是全宽可见的。用户可以滚动抓取到下一页，因此水平滚动是不可避免的。还有一种更好的方法可以做到这一点，而不是将所有窗口都布置好，然后等待移动到位，从而导致水平滚动，这也是人们不喜欢web界面的第一件事。向右滑动和向右滚动是有区别的。您可以使用CSS动画效果来模拟从右侧进入的窗口。@ScottMarcus抱歉，我需要这样来布局我的产品。你能帮我做些什么吗？