javascript - 在水平滚动中将焦点元素居中

Question

我用 <HTML/> 创建了一个水平滚动容器和 CSS :

body {
background-color: #212121;
}

.scroll_container {
	height: 100px;
	width: 400px;
	display: flex;
	align-items: center;
	overflow-y: hidden;
	width: 100%;
	height: 20%;
}

.scroll_container_sub {
	height: 100px;
	min-width: 230px;
	float: none;
	display: inline-block;
	zoom: 1;
	margin: 10px;
	border: solid 1px transparent;
	border-radius: 15px;
	background-color: #fff;
}

<div class="scroll_container">
        <div class="scroll_container_sub"></div>
        <div class="scroll_container_sub"></div>
        <div class="scroll_container_sub"></div>
</div>

我的尝试:
是否有可能每次一个元素( scroll_container_sub )都以 scroll_container 为中心？尤其是移动端使用，这个非常好。
示例:
滚动后中间元素水平居中:

(图片:手机视角)
这意味着这样的事情不应该存在:

因为没有一个容器居中。当我查看这样的滚动位置时， ScrollView 应该将其中一个容器居中。
希望获得更多详细信息::)
在下面的链接中，您会看到我试图实现的目标。只看开头那几秒。
每次用户刷卡后，卡片都会居中。正是我想要实现的目标:
https://www.youtube.com/watch?v=UsXv6VRqZKs你需要一个活生生的例子吗？没问题。在 Google Play 商店中，您可以找到它们。例如这个滑动器:

~菲利普

Answer 1

2022 编辑:除非您需要支持旧浏览器，scroll-margin现在是要走的路。

JS 实现和理论如下:

---

一般公式如下 - 您找到您感兴趣的元素，找到它的中点 (x + width/2)，然后从中减去容器宽度的一半:

window.addEventListener("load", function(e) {
  var container = document.querySelector(".scroll_container");
  var middle = container.children[Math.floor((container.children.length - 1) / 2)];
  container.scrollLeft = middle.offsetLeft +
    middle.offsetWidth / 2 - container.offsetWidth / 2;
});

body {
background-color: #212121;
}

.scroll_container {
    height: 100px;
    width: 400px;
    display: flex;
    align-items: center;
    overflow-y: hidden;
    position: relative;
    width: 100%;
    height: 20%;
}

.scroll_container_sub {
    height: 100px;
    min-width: 230px;
    float: none;
    display: inline-block;
    zoom: 1;
    margin: 10px;
    border: solid 1px transparent;
    border-radius: 15px;
    background-color: #fff;
}

<div class="scroll_container">
        <div class="scroll_container_sub"></div>
        <div class="scroll_container_sub"></div>
        <div class="scroll_container_sub"></div>
</div>

如果你想动态应用这个效果，你会想要等到用户完成滚动，计算新的滚动目的地，并随着时间的推移逐渐接近它。