<table><tbody>
除了乾貨，其它什麼也沒有
職場
數據
新媒體
設計
極客
企業新媒體頂級託管：021 37218818
或可添加管理員微信： Zhuoya_Work
五仁月餅，是每逢中秋的必然性熱點之一。
今年，星巴克也做足了準備，推出特色的五仁月餅。但是在 Digital 發佈時，其微信公眾平臺圖文發生重大車禍，一起來看今早發佈的《一切要從星巴克出了全新五仁月餅開始》（點擊藍色字閱讀）出現的排版失誤。
滑動模塊拖拽 BUG
▼星巴克的廣告圖文，有如下滑動效果▼
明明提示為「左右滑動」，但滑動模塊允許萬向滑動，並且出現彈性效果。
由於多個滑動區連續排列，導致文章無法被正常向下滑動閱讀，反覆受到滑動模塊交互效果的阻礙，導致跳出概率徒增。
其實，基於 CSS 中<code><scroll>/<code>的滑動模塊，是現在企業品牌新媒體運營的常用佈局，通常在橫向展示多張圖片時可以節省頁面空間，並且突出產品不同的優先級順序。
一般來說，橫向滑動（溢出）我們選擇<code><overflow-x>/<code>，縱向滑動（溢出）我們選擇擇<code><overflow-y>/<code>。這對大多數新媒體從業者來說都是基本代碼功技能。
那麼明明大多數新媒體人都不會出現的錯誤，為何會發生在星巴克官方微信公眾平臺這類標杆新媒體上？通過審查代碼，JZ 為大家解讀背後的失敗根源。
兩個參數作祟
就每個滑動模塊而言，星巴克公眾平臺編輯是這樣調用代碼的▼
首先，星巴克新媒體編輯錯誤使用了<code><auto>/<code>的定義。導致沒能進一步定義滾動條的明確方向。這種定義方式在圖片長或寬與<code>/<code>的長或寬一致時並不會暴露太多問題，但是一方面這種定義方式不嚴謹，另一方面接下去的第二個書寫問題使得本定義成為了火上澆油的錯誤。
其次，JZ 提到的第二個書寫問題就是<code>的定義。該屬性控制元素在移動設備上是否使用滾動回彈效果。
如果值為 auto，當手指從觸摸屏上移開，滾動會立即停止；如果值為 touch，當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會創建一個新的堆棧上下文。
因此，回彈效果本身其實並非 BUG，如果<code>/<code>本身設定了強制橫向滑動，那麼橫向回彈並不會妨礙交互。
但錯就錯在，星巴克的新媒體編輯既採用了萬向滑動，又增加了回彈效果。結果導致根本不存在上下滑動需要的圖片，被強制拖拽並回彈，使得整篇圖文難以持續下滑閱讀完整。
總得來說，這篇廣告圖文暴露了星巴克新媒體編輯對 CSS 盒模型不夠紮實的知識基礎，導致了海量用戶在該圖文交互過程中苦不堪言。
滑動模塊的正確用法
除了堅持設定滑動方向（特殊訴求情況除外），合理搭配回彈或非回彈交互。滑動模塊其實還有更多能讓人拍案叫絕的用法。比如在《拼圖遊戲 · 純代碼圖文特效(3)》中，我們曾製作出二維碼拼接滑動效果▼
另外，如《“一鍵關注”失效？兩種神排版恢復！》教程中，第二個由 JZ多媒體解決方案首席講師 GL 發明的溢出卡片法也利用到了<code><overflow>/<code>。其實，CSS 的每一個定義都看似簡單，但結合充分的創意思維都可以形成優質的新媒體設計。
更多高階新媒體代碼技術，我們將在計劃出版的圖書中一一解讀，歡迎持續關注。也可以留意秋季學期我們連續第四年發起的高校新媒體與 HTML5 設計公益講座。
-END-
閱讀更多 JZ多媒體解決方案 的文章
