您好,登錄后才能下訂單哦!
CSS Scroll Snap是個(gè)非常好用的特性,可以讓網(wǎng)頁(yè)容器滾動(dòng)停止的時(shí)候,無(wú)需任何JS代碼的參與,瀏覽器可以自動(dòng)平滑定位到指定元素的指定位置。類(lèi)似幻燈片廣告效果就可以純CSS實(shí)現(xiàn)。
而且CSS Scroll Snap的兼容性非常好,移動(dòng)端幾乎可以放心使用。
今天下午在實(shí)現(xiàn)一個(gè)功能需求的時(shí)候,正好遇到一個(gè)場(chǎng)景非常適合使用Scroll Snap來(lái)實(shí)現(xiàn),滑動(dòng)依次顯示人物角色。于是就大膽使用了下,哇,好棒,無(wú)需任何js做邊界判斷,滑動(dòng)停止自動(dòng)定位到想要的位置。
關(guān)鍵CSS代碼如下:
ul { width: 375px; height: 667px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; white-space: nowrap; overflow-y: hidden; } li { display: inline-block; width: 100%; height: 100%; scroll-snap-align: center; }
滾動(dòng)父容器元素設(shè)置
scroll-snap-type:x mandatory
,水平滾動(dòng),強(qiáng)制定位,子列表元素設(shè)置
scroll-snap-align:center
讓列表在滾動(dòng)容器的中間顯示,于是效果達(dá)成。
然而,滾動(dòng)定位結(jié)束后,還需要需要高亮當(dāng)前定位的人物素材。我發(fā)現(xiàn)有些難辦了!
以前這種滑動(dòng)效果用JS實(shí)現(xiàn),無(wú)論是JS動(dòng)畫(huà)結(jié)束,還是CSS動(dòng)畫(huà)結(jié)束,都是有回調(diào)函數(shù)可以使用的。但是這里卻是滾動(dòng),而且滾動(dòng)后還會(huì)自己再定位一會(huì)兒,自己定位時(shí)間有長(zhǎng)有短,誰(shuí)知道什么時(shí)候停止?有時(shí)候一口氣滑多個(gè)元素,也不確定到底停止在哪個(gè)元素上。
實(shí)際上,標(biāo)準(zhǔn)制定者們和瀏覽器廠商正在積極推進(jìn)Scroll Snap相關(guān)回調(diào)事件的落地,這樣可以精確知道滾到什么時(shí)候停止以及滾動(dòng)定位到哪個(gè)元素上,但是,標(biāo)準(zhǔn)還在折騰,瀏覽器還沒(méi)有支持。項(xiàng)目現(xiàn)在就要用,怎么辦呢?
對(duì)!肯定要出動(dòng)JS輔助。
實(shí)際上,就算不是Scroll Snap的使用場(chǎng)景,就算是普通的滾動(dòng),由于滾動(dòng)具有慣性,檢測(cè)滾動(dòng)是否停止也是一個(gè)經(jīng)常會(huì)遇到的需求。因此,有必要捋一個(gè)檢測(cè)滾動(dòng)什么時(shí)候停止的方法。
檢測(cè)元素的滾動(dòng)是否停止,我的實(shí)現(xiàn)思路是這樣的,在滾動(dòng)事件中跑一個(gè)定時(shí)器,記錄當(dāng)前時(shí)間的滾動(dòng)距離和上一次滾動(dòng)的距離是否相等,如果相等則認(rèn)為滾動(dòng)已經(jīng)停止,如果不相等,則認(rèn)為滾動(dòng)依然在進(jìn)行。
用JavaScript示意就是( 這個(gè)實(shí)現(xiàn)已作廢 ):
// 定時(shí)器,用來(lái)檢測(cè)水平滾動(dòng)是否結(jié)束 var timer = null; // 上一次滾動(dòng)的距離 var scrollLeft = 0, scrollTop = 0; // 滾動(dòng)事件開(kāi)始 container.addEventListener('scroll', function () { clearInterval(timer); // 重新新的定時(shí)器 timer = setInterval(function () { if (container.scrollLeft == scrollLeft && container.scrollTop == scrollTop) { // 滾動(dòng)距離相等,認(rèn)為停止?jié)L動(dòng)了 clearInterval(timer); // ... 做你想做的事情,如回調(diào)處理 } else { // 否則,依然記住上一次滾動(dòng)位置 scrollLeft = container.scrollLeft; scrollTop = container.scrollTop; } }, 100); });
如果你有興趣,可以對(duì)上面代碼進(jìn)行進(jìn)一步封裝。
更新于翌日
滾動(dòng)終止檢測(cè)可以無(wú)需判斷前后滾動(dòng)距離是否相等,因?yàn)闊o(wú)論是慣性還是Snap定位scroll事件也是持續(xù)觸發(fā)的。因此,可以直接這樣:
// 定時(shí)器,用來(lái)檢測(cè)水平滾動(dòng)是否結(jié)束 var timer = null; // 滾動(dòng)事件開(kāi)始 container.addEventListener('scroll', function () { clearTimeout(timer); // 重新新的定時(shí)器 timer = setTimeout(function () { // 無(wú)滾動(dòng)事件觸發(fā),認(rèn)為停止?jié)L動(dòng)了 // ... 做你想做的事情,如回調(diào)處理 }, 100); });
當(dāng)然,上面提供的方法并不是非常精準(zhǔn)的中止檢測(cè),因?yàn)镾croll Snap最后的重定位瀏覽器自身有個(gè)檢測(cè),這個(gè)檢測(cè)事件,根據(jù)我的反復(fù)研究與測(cè)試,應(yīng)該是
350ms
(實(shí)際運(yùn)行可能會(huì)略微大幾毫秒),遠(yuǎn)比上面設(shè)置的
100ms
要大,因此,會(huì)有一次錯(cuò)誤的冗余判斷,發(fā)生在Snap定位開(kāi)始之前。
我想了想,這個(gè)問(wèn)題無(wú)法避免,但也不是什么大問(wèn)題??偛豢赡茉O(shè)置
400ms
檢測(cè),延遲太高,體驗(yàn)不一定好。
原理如下,遍歷所有的列表元素,檢測(cè)列表元素的左邊緣相對(duì)于滾動(dòng)容器左邊緣(如果是左對(duì)齊-
scroll-snap-align:left
)或中心(居中對(duì)齊)或右邊緣(右對(duì)齊)的位置。當(dāng)然,如果列表元素尺寸和滾動(dòng)容器尺寸一致,則左中右邊緣檢測(cè)都可以。
JS示意:
[].slice.call(container.children).forEach(function (ele, index) { if (Math.abs(ele.getBoundingClientRect().left - container.getBoundingClientRect().left) < 10) { // 此刻的ele元素就是當(dāng)前定位的元素 // ... 你可以對(duì)ele做你想做的事情 } else { // 此刻的ele元素不是當(dāng)前定位的元素 } });
嚴(yán)格來(lái)講,應(yīng)該計(jì)算是否等于
,而不是小于
10
,這里嘛,加了點(diǎn)容錯(cuò)區(qū)間吧。
搞定了上面2個(gè)需要JS輔助的需求點(diǎn),最終的效果就出來(lái)了。
自己是一個(gè)五年的前端工程師,希望本文對(duì)你有幫助!
這里推薦一下我的前端學(xué)習(xí)交流扣qun:731771211 ,里面都是學(xué)習(xí)前端的,如果你想制作酷炫的網(wǎng)頁(yè),想學(xué)習(xí)編程。自己整理了一份2019最全面前端學(xué)習(xí)資料,從最基礎(chǔ)的HTML+CSS+JS【炫酷特效,游戲,插件封裝,設(shè)計(jì)模式】到移動(dòng)端HTML5的項(xiàng)目實(shí)戰(zhàn)的學(xué)習(xí)資料都有整理,送給每一位前端小伙伴,每天分享技術(shù)
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。