在水平滚动中将焦点项目居中

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的中心？尤其是移动端使用，这个非常好。
示例：
滚动后中间项目水平居中：

（图片：移动视图）
这意味着这样的事情不应该存在：

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

~菲利普

Answer 1

一般公式如下 - 您找到您感兴趣的元素，找到它的中点 (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>

如果您想动态应用此效果，您会希望等到用户完成滚动，计算新的滚动目的地，并随着时间的推移逐步实现。

编辑：对于仅 CSS 的解决方案，请参阅 scroll-margin（截至撰写本文时，尚未得到普遍支持）

在水平滚动中将焦点项目居中

Center the focused item in horizontal scroll

html

javascript

css

uiscrollview

uislider