小愛同學(xué)mini官網(wǎng)頁面的局部滾動是怎么實現(xiàn)的？

主要是通過監(jiān)聽滾動條變化來實現(xiàn)的。
//監(jiān)聽滾動條變化

window.addEventListener('scroll', () => {

        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        //通過scrollTop的值判斷滾動條的位置，里面實現(xiàn)跟輪播類似的index加減操作就行了。
    });

這個問題問的好。

看了一下，其實原理是比較簡單的，但是需要處理好相關(guān)的事件，具體實現(xiàn)起來還是比較繁瑣的。

一共5個輪播，每個輪播的高度與當(dāng)前頁面相同（fullpage），并且外面套著一個父容器，父容器的高度是5個輪播的高度總和。

未滾動到該區(qū)域時，5個輪播都是使用absolute定位，一旦滾動到該區(qū)域，將會切換為fixed定位，并貼著瀏覽器上邊緣。同時計算滾動距離，同一時間僅顯示一個輪播，超出某個輪播區(qū)域時才會切換到另一個。

所以我們看到的瀏覽器的滾動條會正常滾動，因為瀏覽器滾動的是5個輪播的父容器。而5個輪播之間是通過設(shè)置透明度的方式切換顯示的。個人認(rèn)為透明度的這種做法不是很好，會影響性能，改成使用display或visibility可能更好。