創建類似電子書的文本列所需的騙局

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中文網其他相關文章！