使用少量 CSS/JS 创建类似 iBooks 的布局

前几天我看到老朋友 Dave Rupert 在 CodePen 上玩横向布局。他发现了一些我之前不知道的东西。如果你愿意，可以称之为 CSS 技巧。

当您使用 CSS columns 并设置 column-count 为 2 时，内容将被分成 2 列， *在可见区域内*。这并不意味着只有两列。如果内容超出该元素（如果设置了固定高度很容易发生），则会在水平方向上创建更多列。此外，您可以使该溢出内容可滚动。

查看 Chris Coyier (@chriscoyier) 在 CodePen 上创建的示例 wBpYGm。

当我看到它时，我就像 *哇，就像 iBooks！* 两列。底部有滚动条。

只需稍微调整一下样式，我们就可以做到这一点。我们甚至可以使用整个浏览器窗口来实现它。

* {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  height: 100%;
  padding: 2em;
  font-family: 'Gentium Basic', serif;
  column-count: 2;
  column-gap: 4em;
}

Dave 还尝试了轻松分页的方法。点击屏幕的右侧，滚动超过 2 列（屏幕的宽度）。点击屏幕的左侧，向后滚动。

var scrollLeft = function() {
  window.scrollTo(window.scrollX - window.innerWidth, 0);
};

var scrollRight = function() {
  window.scrollTo(window.scrollX + window.innerWidth, 0);
};

document.body.addEventListener('click', function(e) {
  e.preventDefault();
  if (e.clientX > (window.innerWidth / 2)) {
    scrollRight();
  } else {
    scrollLeft();
  }
});

查看 Chris Coyier (@chriscoyier) 在 CodePen 上创建的示例 巴斯克维尔的猎犬。

我相信你们这些聪明人可以做得更酷，例如实现吸附滚动（这样就不会在列之间滚动）、进度指示器、localStorage 保存位置、@media 查询以在 column-count 中上下切换，以及所有这些酷炫的东西。