㈠ 什麼是網頁設計中的滾動設計如何進行滾動設計
曾經的網站設計「禁忌」已經成為最受歡迎的技術之一，下面將討論一些滾動設計的利弊，並分析一些技巧。
滾動設計適合你的產品嗎？
每一種設計技巧和工具，都有喜歡這個概念的人和那些討厭它的人。在大多數情況下，任何一方都不是本質上對錯的；因此，在處理此類項目之前，權衡所有注意事項非常重要。
滾動的優點：
鼓勵互動 – 隨著不斷變化的元素不斷刺激，它可以是一種有趣的講故事方法，鼓勵用戶交互 - 尤其是高雅執行的視差滾動。
更快 – 長滾動比單擊復雜的導航路徑更快，並且不會減慢或限制用戶體驗。如Interaction Design Best Practices中所述，對時間的感知通常比實際時間的流逝更重要。
吸引用戶 – 易用性可促進交互性，增加現場時間。對於無限滾動網站尤其如此，您可以在其中幫助用戶發現他們可能甚至沒有想到的相關內容。
響應式設計 – 頁面設計在具有不同屏幕大小和功能的設備之間可能會變得復雜，但滾動有助於簡化差異。
手勢控制 – 滾動似乎與觸摸有著有機的聯系，因為向下輕掃比在屏幕上不同區域重復點擊要自然得多。用戶（尤其是移動設備）通常接受這一方式來顯示信息。
令人愉快的設計 – 不需要多次單擊即可獲得更快的交互，從而獲得更類似於應用或游戲的用戶體驗。
滾動的缺點
固執用戶 –一些用戶總是毫無理由地去抵制改變。盡管如此，該技術現在非常普遍（特別是在移動體驗期間），可以說大多數用戶都習慣了這種技術。
SEO缺點 - 只有一個頁面可能對網站的SEO產生負面影響。
迷失方向 - 滾動和內容之間的斷開可能會使用戶感到困惑或脫節。
導航困難 – "返回"頁面上的先前內容可能會很尷尬。為了對付這種情況，您可以創建一個持久的頂部導航，其中每個部分都錨定到頁面。
網站速度 – 視頻或圖像圖庫等大量內容可能會降低網站速度，尤其是視差滾動網站，它們依賴於 Javascript 和 jQuery
沒有頁腳 – 使用無限滾動網站，我們建議使用簡約的"粘性"頁腳，這樣您就不會犧牲可導航性。否則，用戶可能會因為頁面底部缺少進一步的導航而感到困惑。
撇開優點和缺點不談，某些類型的網站更適合長滾動設計。更長的滾動網站更適合……
...包含很大一部分移動流量（大多數用戶）
...包括頻繁更新或新內容（如博客）
...有很多信息以單一的方式呈現，以便理解（如信息圖）
...不包含富媒體，因為這可能導致負載時間的消耗
滾動最佳實踐
長滾動、視差效應和類似機制在設計領域中仍然比較新（約4年歷史），但仍從試錯經驗中可以獲取一些基本的最佳實踐。
從 2015 和 2016 的 Web 設計趨勢總結，以下是成功實現長滾動的一些日常技巧。
不用擔心短滾動和長滾動交替使用。 讓內容決定滾動長度，而不是反過來。 使用短滾動主頁和長滾動著陸頁（如產品，旅遊等）非常好（並且非常受歡迎）。
考慮粘性導航，以便用戶始終可以快速"返回"或從滾動中的元素跳轉到另一個元素。
將滾動與設計元素或工具結合，以便每個用戶都能快速了解網站的工作方式。箭頭、動畫按鈕或類似的用戶界面工具是幫助用戶確定下一步操作的有趣且簡單的方法。有些網站甚至包含一個小按鈕，其中包含"滾動更多"或"開始"等說明，來提高頁面的導航性。
明確區分滾動點擊和其他CTA元素，以便網站獲得所需的交互。
做一些研究，看看用戶如何與滾動交互。例如，在 Google 分析中，可以打開"網頁分析"選項卡，查看屏幕下方（第二屏及之後）用戶的點擊數。然後，你可以根據需要調整設計。
不要過分。長滾動並不意味著 500 頁的連續內容 - 長滾動也可以很簡單。講述你的故事，然後適可而止，不要喋喋不休 。
專注於用戶目標，並接受即使是無限滾動網站也不是真正無窮無盡的。 創建長滾動網站時，要了解用戶仍需要方向感（當前位置）和導航（其他可能的路徑）。
包括有助於在滾動中定位用戶的視覺提示，例如左下方用於「七種類型的摩托車騎手」站點的頭盔圖標。
平時用墨刀設計原型時候，可以直接拖動，增加頁面長度，進行滾動設計。
㈡ 前端滾動輪播實現
內容 ：實現滾動輪播-給非前凱虛端人員觀看的
前言 ：輪播的具體實現有很多種方式，下或孫盯面主要講一下我是怎麼實現的。
淘寶網首頁衫和輪播圖
樣例1-輪播原理
樣例2-隱藏其他的slide只留下一個
樣例3-復制頭尾
樣例4-無限輪播原理
樣例5-去除其他slide
樣例6-將項的內容改成與原始對象一致
㈢ 前端頁面需要用到多處scroll滑動事件，怎麼事件之間不影響
原因分析:
ios的webview 內核 設定了其在進行momentum scrolling(彈性滾動)時,會停止所有的 事件響應 及 DOM操作引起的頁面渲染 (親測),故 onscroll 不能實時響應
曾做兼容方案:
使用 ontouchmove 去替代 nscroll ,雖然能更頻繁的觸發事件,但是這邊的項目需求是實時響應滾動事件的同時,還要對頁面元素進行重定位的DOM操作,由上述原因可知,在滾動過程中,頁面會停止一切關於DOM方面的操作,所以若使用 ontouchmove 去實現的話,在按住屏幕進行滑動的時候,屏幕會出現元素抖動的情況(事件觸發與DOM操作間具有幾十毫秒的時間差),兼容失敗
使用 iscroll 的probe版本,該版本能實時探查到滾動的距離,但該鉤子函數是實時去關注 requestAnimationFrame 下的狀態,所以對瀏覽器的版本性能消耗很大,加上 react 的 DOM 操作,安卓機根本動不了,兼容失敗
使用 swiper 插件,在啟動 freeMode 模式時模擬原生的彈性滾動( swiper 模擬原生滾動的方案能兼容較多的安卓機型不出現bug,推薦), 因為 swiper 沒有實時監聽滾動位置的功能,故我監聽滾動開始及結束後的事件,通過 setInterval 及一些計算去實現滾動條的監聽,但因為 react 元素的變化量比較大,導致 swiper 在移動端時對父容器的計算速率達到了一個瓶頸,依舊出現很卡頓的現象,兼容失敗
fallback方案,安卓端使用原生onscroll實現,ios直接載入全部子元素,畢竟ios的性能方面還是比較好的,有更好的方案後續再更.
㈣ 手機前端，左右兩個div，怎麼做兩個滾動，就是我滾動左邊的時候右邊不懂，滾動右邊左邊不動，怎麼實現
你看看這樣可以實現么；
就是一個網站在瀏覽器里（高度足夠滾動），瀏覽器會出現滾動條，我叫它為右邊（right）的div，然後在你的網頁中也有一處是出現滾動條的，我叫它為左邊（left）的div，意思就是網頁為大的div（右邊的 right）；它裡麵包含著左邊（left）的div；
大概意思你懂了么？
不過好像右邊動 左邊也會動=。=