這篇文章主要介紹CSS中scroll-snap滾動事件停止及元素位置檢測的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計及定制網(wǎng)站建設(shè)服務(wù),專注于成都企業(yè)網(wǎng)站建設(shè),高端網(wǎng)頁制作,對成都橡塑保溫等多個行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗的網(wǎng)站建設(shè)公司。專業(yè)網(wǎng)站設(shè)計,網(wǎng)站優(yōu)化推廣哪家好,專業(yè)成都網(wǎng)站營銷優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。

一、Scroll Snap是前端必備技能

CSS Scroll Snap是個非常好用的特性，可以讓網(wǎng)頁容器滾動停止的時候，無需任何JS代碼的參與，瀏覽器可以自動平滑定位到指定元素的指定位置。類似幻燈片廣告效果就可以純CSS實現(xiàn)。

而且CSS Scroll Snap的兼容性非常好，移動端幾乎可以放心使用。

 

二、源自實際項目的scroll-snap場景

今天下午在實現(xiàn)一個功能需求的時候，正好遇到一個場景非常適合使用Scroll Snap來實現(xiàn)，滑動依次顯示人物角色。于是就大膽使用了下，哇，好棒，無需任何js做邊界判斷，滑動停止自動定位到想要的位置。

關(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;
}

滾動父容器元素設(shè)置 scroll-snap-type:x mandatory ，水平滾動，強制定位，子列表元素設(shè)置 scroll-snap-align:center 讓列表在滾動容器的中間顯示，于是效果達成。

然而，滾動定位結(jié)束后，還需要需要高亮當前定位的人物素材。我發(fā)現(xiàn)有些難辦了！

以前這種滑動效果用JS實現(xiàn)，無論是JS動畫結(jié)束，還是CSS動畫結(jié)束，都是有回調(diào)函數(shù)可以使用的。但是這里卻是滾動，而且滾動后還會自己再定位一會兒，自己定位時間有長有短，誰知道什么時候停止？有時候一口氣滑多個元素，也不確定到底停止在哪個元素上。

實際上，標準制定者們和瀏覽器廠商正在積極推進Scroll Snap相關(guān)回調(diào)事件的落地，這樣可以精確知道滾到什么時候停止以及滾動定位到哪個元素上，但是，標準還在折騰，瀏覽器還沒有支持。項目現(xiàn)在就要用，怎么辦呢？

對！肯定要出動JS輔助。

實際上，就算不是Scroll Snap的使用場景，就算是普通的滾動，由于滾動具有慣性，檢測滾動是否停止也是一個經(jīng)常會遇到的需求。因此，有必要捋一個檢測滾動什么時候停止的方法。

三、我的滾動中止檢測方法

檢測元素的滾動是否停止，我的實現(xiàn)思路是這樣的，在滾動事件中跑一個定時器，記錄當前時間的滾動距離和上一次滾動的距離是否相等，如果相等則認為滾動已經(jīng)停止，如果不相等，則認為滾動依然在進行。

用JavaScript示意就是（ 這個實現(xiàn)已作廢）：

// 定時器，用來檢測水平滾動是否結(jié)束
var timer = null;
// 上一次滾動的距離
var scrollLeft = 0, scrollTop = 0;
// 滾動事件開始
container.addEventListener('scroll', function () {
    clearInterval(timer);
    // 重新新的定時器
    timer = setInterval(function () {
        if (container.scrollLeft == scrollLeft && container.scrollTop == scrollTop) {
            // 滾動距離相等，認為停止?jié)L動了
            clearInterval(timer);
            // ... 做你想做的事情，如回調(diào)處理
        } else {
            // 否則，依然記住上一次滾動位置
            scrollLeft = container.scrollLeft;
            scrollTop = container.scrollTop;
        }
    }, 100);
});

如果你有興趣，可以對上面代碼進行進一步封裝。

更新于翌日

滾動終止檢測可以無需判斷前后滾動距離是否相等，因為無論是慣性還是Snap定位scroll事件也是持續(xù)觸發(fā)的。因此，可以直接這樣：

// 定時器，用來檢測水平滾動是否結(jié)束
var timer = null;
// 滾動事件開始
container.addEventListener('scroll', function () {
    clearTimeout(timer);
    // 重新新的定時器
    timer = setTimeout(function () {
        // 無滾動事件觸發(fā)，認為停止?jié)L動了
        // ... 做你想做的事情，如回調(diào)處理
    }, 100);
});

當然，上面提供的方法并不是非常精準的中止檢測，因為Scroll Snap最后的重定位瀏覽器自身有個檢測，這個檢測事件，根據(jù)我的反復(fù)研究與測試，應(yīng)該是 350ms（實際運行可能會略微大幾毫秒），遠比上面設(shè)置的 100ms 要大，因此，會有一次錯誤的冗余判斷，發(fā)生在Snap定位開始之前。

我想了想，這個問題無法避免，但也不是什么大問題?？偛豢赡茉O(shè)置 400ms 檢測，延遲太高，體驗不一定好。

四、當前滾動目標元素檢測方法

原理如下，遍歷所有的列表元素，檢測列表元素的左邊緣相對于滾動容器左邊緣（如果是左對齊- scroll-snap-align:left ）或中心（居中對齊）或右邊緣（右對齊）的位置。當然，如果列表元素尺寸和滾動容器尺寸一致，則左中右邊緣檢測都可以。

JS示意：

[].slice.call(container.children).forEach(function (ele, index) {
    if (Math.abs(ele.getBoundingClientRect().left - container.getBoundingClientRect().left) < 10) {
        // 此刻的ele元素就是當前定位的元素
        // ... 你可以對ele做你想做的事情
    } else {
        // 此刻的ele元素不是當前定位的元素
    }
});

嚴格來講，應(yīng)該計算是否等于 0 ，而不是小于 10 ，這里嘛，加了點容錯區(qū)間吧。

搞定了上面2個需要JS輔助的需求點，最終的效果就出來了。

以上是“CSS中scroll-snap滾動事件停止及元素位置檢測的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

名稱欄目：CSS中scroll-snap滾動事件停止及元素位置檢測的示例分析
文章源于：http://jinyejixie.com/article2/gdpooc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、用戶體驗、全網(wǎng)營銷推廣、外貿(mào)網(wǎng)站建設(shè)、App設(shè)計、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)