创建类似电子书的文本列所需的骗局

Jason Pamental在Web字体和版式新闻上的最新工作展示了一种巧妙的方法，可以为移动友好的电子书体验创建可滑动的列。挑战？生成全宽列，可根据需要动态调整。

最初使用CSS列的看似简单的解决方案似乎很有希望：

列：100VW自动；

添加一些改进：

主要的 {
  列：100VW自动；
  列隙：2REM;
  Overflow-X：自动;
  高度：计算（100VH -2REM）;
  字体：120％/1.4佐治亚州；
}

虽然接近理想，但由此产生的滚动证明了生涩和不满意。尝试使用-webkit-overflow-scrolling: touch;由于滚动扣扣与自动生成的列相互作用的局限性，卷轴捕集的幅度不足。滚动捕集需要块级元素，CSS列技术本质上不提供。

使用Flexbox方法使用<div>元素提供了潜在的解决方案：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">主要的 { 显示：Flex; } main&gt; div { 弹性：0 0 100VW; }</pre><div class="contentsignin">登录后复制</div></div> <p>但是，这需要预先定义DIV的数量，这对于可变内容是不切实际的。缺乏CSS区域，该功能会自动生成块级元素，这使事情变得更加复杂。</p> <p> Pamental的巧妙解决方法采用JavaScript。它确定了CSS列方法生成的“页面”的数量，然后将隔板divs（每个页面宽度）插入滚动容器中。这些divs充当卷轴扣目标，使能够平滑，类似页面的滑动。这种聪明的技术有效地避开了CSS的局限性。当前，这种增强的体验可作为本书网站上的可选设置获得。</p> </div>

以上是创建类似电子书的文本列所需的骗局的详细内容。更多信息请关注PHP中文网其他相关文章！