主要是通過(guò)監(jiān)聽(tīng)滾動(dòng)條變化來(lái)實(shí)現(xiàn)的。
//監(jiān)聽(tīng)滾動(dòng)條變化

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

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

這個(gè)問(wèn)題問(wèn)的好。

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

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

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

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