Question

我试图为水平滚动页面创建一个基本骨架，该页面使用任何有效的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;
}

Answer 1

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

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

滚动快照的水平滚动页面？

1 个答案: