创建类似电子书文本列所需的技巧

Jason Pamental 的最新 Web 字体和排版新闻中有一些有趣的 CSS 技巧。 Jason 想要为他在移动设备上的数字图书体验引入可滑动列。这立即提出了一个有趣的问题…… *如何设置全宽列，并在需要时水平添加列？* 嗯，这本身就是一个好技巧，而且它只是一行代码

columns: 100vw auto;

但从那里开始，它变得更加复杂和令人失望。

只需稍微调整一下列的格式

main {
  columns: 100vw auto;
  column-gap: 2rem;
  overflow-x: auto;
  height: calc(100vh - 2rem);
  font: 120%/1.4 Georgia;
}

我们就得到了这个

这非常接近完美！

我们可能不会在桌面设备上应用此效果，但是，这就是媒体查询的用途。在移动设备上，我们得到…

这种断断续续的滚动使得这种体验非常糟糕。我们可以使用 -webkit-overflow-scrolling: touch; 来改善它…

平滑度 *可能* 有所改善，但列无法自动对齐到位置这一事实使其几乎同样糟糕的阅读体验。这就是 scroll-snap 的用途，但可惜

不幸的是，事实证明您需要一个可以捕捉到的块级元素，而人工创建的列并不算作此类元素。

哦，不！如此接近！但又如此遥远！

如果我们确实想要滚动捕捉，则内容需要位于块级元素（如 <div>）中。使用 flexbox 设置 <div> 元素的水平行非常容易，例如…

main {
  display: flex;
}
main > div {
  flex: 0 0 100vw;
}

但是……我们需要多少个 div？谁知道！这是可能发生变化的任意内容。即使我们知道，我们如何才能在 div 之间自然地流动内容？这不是一回事。这就是为什么 CSS 区域从未实现很糟糕的原因。因此，为了使这种不错的滑动体验在 CSS 中成为可能，我们需要

这两者目前都不可能。

Jason 没有就此止步！他使用 JavaScript 找到了一种可以很好地避免大量滚动劫持的方法。首先，他计算出 CSS 列技术产生的“页面”宽度。然后，他向滚动元素添加了间隔 div，每个 div 的宽度都等于页面宽度，并且 *这些* 就是滚动元素可以捕捉到的对象。非常聪明。

目前，您可以在图书网站上通过启用可选设置来体验它。

评论