網(wǎng)頁(yè)無(wú)限滾動(dòng)方案的思考和實(shí)現(xiàn)（1）
時(shí)間：2023-09-10 14:06:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-09-10 14:06:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
網(wǎng)頁(yè)無(wú)限滾動(dòng)方案的思考和實(shí)現(xiàn)（1）：網(wǎng)頁(yè)設(shè)計(jì)中，在內(nèi)容過(guò)長(zhǎng)、無(wú)法完整顯示在用戶的視圖中時(shí)，設(shè)計(jì)者往往有兩種選擇：
1、把內(nèi)容分頁(yè)，并在每頁(yè)里設(shè)置上一頁(yè)、下一頁(yè)和頁(yè)數(shù)跳轉(zhuǎn)接口，以允許用戶在頁(yè)面間跳轉(zhuǎn)。Google的搜索頁(yè)面是經(jīng)典例子。
2、把全部?jī)?nèi)容連在一起，形成一個(gè)很長(zhǎng)的頁(yè)面，用戶只需要上下滾動(dòng)即可瀏覽所有內(nèi)容。例子如Twitter和Facebook的時(shí)間流頁(yè)面。
概括一下的話，也就是“分頁(yè)”和“無(wú)限滾動(dòng)”兩種思路。從用戶體驗(yàn)設(shè)計(jì)的角度看，使用無(wú)限滾動(dòng)的好處很明顯，例如：
- 內(nèi)容在頁(yè)面上的順序完全對(duì)應(yīng)了邏輯順序，不需要引入頁(yè)數(shù)的多余信息
- 用戶的唯一交互方式是滾動(dòng)，比起需要翻頁(yè)和滾動(dòng)兩種操作的分頁(yè)設(shè)計(jì)，只需要一種操作的無(wú)限滾動(dòng)方案更具有沉浸感
另一方面，現(xiàn)有的無(wú)限滾動(dòng)方案，往往存在一些致命的弱點(diǎn)：
- 不支持改變已經(jīng)渲染的項(xiàng)目高度，或者改變的代價(jià)過(guò)高
- 難以快速定位到列表中的特定項(xiàng)目
- 因?yàn)樯厦娴脑?，?duì)瀏覽器特性（歷史記錄和書簽、前進(jìn)/后退、分享鏈接等）支持不好
最近在自己的項(xiàng)目中做了一個(gè)React組件，解決了一些問(wèn)題。特性包括：
- 僅渲染在視圖內(nèi)的項(xiàng)目以節(jié)省資源
- 也支持預(yù)加載視圖外一定范圍里的項(xiàng)目
- 在初次渲染時(shí)可以設(shè)置焦點(diǎn)
- 使用原生的overflow: scroll機(jī)制實(shí)現(xiàn)滾動(dòng)
- 一些滾動(dòng)組件使用了事件響應(yīng)+transform等方式替代原生滾動(dòng)機(jī)制（如iScroll），對(duì)瀏覽器的原生滾動(dòng)優(yōu)化（多線程等）支持不佳
- 自然地支持了翻頁(yè)鍵/觸摸板等交互方式
- 允許項(xiàng)目在渲染后隨時(shí)改變自己的高度并展示動(dòng)畫
- 項(xiàng)目的高度變化不觸發(fā)其他項(xiàng)目的Reflow
- 無(wú)論改變后的項(xiàng)目大小如何，保持用戶正在閱讀的項(xiàng)目頂端在視圖中的相對(duì)位置
- 在用戶滾動(dòng)或滾動(dòng)動(dòng)畫過(guò)程中，項(xiàng)目也可以改變高度
- 多個(gè)項(xiàng)目同時(shí)改變大小時(shí)，進(jìn)行批處理更新以降低資源消耗
- 支持在組件外控制組件平滑跳轉(zhuǎn)到制定項(xiàng)目
- 包括平滑跳轉(zhuǎn)，組件中所有動(dòng)畫均使用FLIP實(shí)現(xiàn)以降低資源消耗
- 平滑滾動(dòng)過(guò)程中，如果觸摸列表，列表會(huì)停止在正確的預(yù)想位置
- 可以隨時(shí)報(bào)告滾動(dòng)位置、各項(xiàng)目高度和用戶視圖中的項(xiàng)目，從而支持保存視圖
- 支持通過(guò)高度偏移量查找列表中的項(xiàng)目，時(shí)間復(fù)雜度為logN
受控平滑跳轉(zhuǎn)，以及平滑跳轉(zhuǎn)過(guò)程中觸摸導(dǎo)致動(dòng)畫中止的效果：
https://www.zhihu.com/video/943168256404672512注意項(xiàng)目正在不斷改變高度，但由于焦點(diǎn)修正機(jī)制，用戶視圖沒(méi)有改變。
里面用到的新設(shè)計(jì)比較多，暫時(shí)沒(méi)有時(shí)間系統(tǒng)地寫，所以先開(kāi)個(gè)專欄記錄一下。
以后可能在這個(gè)專欄更新設(shè)計(jì)思路和實(shí)現(xiàn)。
關(guān)鍵詞：思考,實(shí)現(xiàn),方案,無(wú)限,滾動(dòng)
在線咨詢