带有滚动捕捉的水平滚动页面？答案

【问题标题】：Horizontal scrolling page with scroll snap?带有滚动捕捉的水平滚动页面？
【发布时间】：2017-06-30 23:39:14
【问题描述】：

我正在尝试为水平滚动页面创建一个基本骨架，该页面使用任何有效的 jQuery 插件来让每个部分都捕捉到视口。

我目前的小提琴位于here。请检查一下。

对于滚动快照，我正在使用jQuery scrollsnap，它也使用 ScrollStop。在 Scrollsnap 的演示页面上，您会看到一个水平滚动示例，正在运行。但是，我的几乎相同，但无法正常工作..

谁知道如何解决这个水平滚动问题，包括对齐每个边缘？

谢谢！

基本的 HTML 框架

<body>
  <div class="wrap">
    <section>
      <div class="container">
        ...
      </div>
    </section>
    <section>
      <div class="container">
        ...
      </div>
    </section>
    ...
  </div>
</body>

伴随着 CSS

html, body {
  height:100%;
  width:100%;
}

#wrap {
  height:100%;
  width:500%; // 100% for each section
  overflow-y:hidden;
  overflow-x:scroll;
}

section {
  width:20%; 100% / count of section
  height:100%;
  float:left;
}

【问题讨论】：

标签： jquery css

【解决方案1】：

您需要添加 direction: x 进行水平对齐，如下所示：

$(document).ready(function() {
    $(document).scrollsnap({
        direction: 'x',
        snaps: 'snap',
        proximity: 12
    });
});

【讨论】：

对于找到这个的任何人，这个库现在位于这里：github.com/benoitpointet/jquery-scrollsnap-plugin