如何实现抖音 '回到刚刚查看的' 位置

实现效果，假如当前浏览的是第121条视频

首先需要先准备要用到的工具函数，和模拟接口回调函数

api.js

//模拟根据当前 id返回 该id前面有多少条视频
export function getOffset(id) {
    return new Promise(resolve => {
        resolve(121)
    })
}



//模拟返回一个具有分页功能的图片列表的函数
export function getVideo(pageNo, pageSize) {
    return new Promise(resolve => {
        // let page = Math.ceil(pageNo/pageSize) //Calculates the number of pages.
        let start = (pageNo - 1) * pageSize; //Calculates the start index. 
        let end = start + pageSize; //Calculates the end index. 
        let arr = []; //Declaring an array. 

        for (let i = start; i < end; i++) { //For loop to add the image to the array. 
            let obj = { id: i, cover: `https://picsum.photos/200/${i}` }
            arr.push(obj)

        }
        resolve(arr) //Resolve the promise.
    })
}

工具函数

utils.js


//防抖
export function debounce(fn, delay = 500) {
    let timer = null;

    return function () {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }

}

//根据页码,和数量获取到当前 对应的下标范围
export function getIndexRange(pageNo, pageSize) {
    const start = (pageNo - 1) * pageSize; // -1 to compensate for 0 indexing.  0-0 is 0.  So -
    const end = start + pageSize - 1; // compensate for 0-0 being 0.  So end is the same as start.  So end = start.  So
    return [start, end]

}

//根据下标,和数量,计算出在哪一页
export function getPage(index, size) {
    return Math.ceil((index + 1) / size)
}

主要运用逻辑在两个函数

import { getOffset, getVideo } from './api.js' 
import { debounce, getIndexRange, getPage } from './utils.js'

const currentId = 100 //当前看过视频的id
const SIZE = 10  //分页的size
const continer = document.querySelector('.continer')
const indicator = document.querySelector('.indicator')


let visibleIndex = new Set() //用于存放出现在视口中元素的 索引值

const ob = new IntersectionObserver(entires => {    //创建一个元素监听器,监听 每个视频的item

    for(const entry of entires){
        const index = +entry.target.dataset.index;
        if(entry.isIntersecting){    // isIntersecting:表示这个元素是否出现在视口中
            visibleIndex.add(index)
        } else {
            visibleIndex.delete(index)
        }
    }
    loadPagesDebounce() //加载这些索引对应的内容
    
})

function getRange() {  //获取视口中索引值集合的 最大和最小
    if(visibleIndex.size === 0) return [0,0]
    const min = Math.min(...visibleIndex)
    const max = Math.max(...visibleIndex)
    return [min, max]
}

function createElement(page) {   //手动创建 需要加载的所有节点
    const childrenLen = continer.children.length
    const count = page * SIZE - childrenLen;
    for (let i = 0; i < count; i++) {
        const item = document.createElement('div')
        item.className = 'item'
        item.dataset.index = i + childrenLen
        continer.appendChild(item)
        ob.observe(item)  //为所有节点添加监听器
    }

}

function loadPages(){
    //得到当前可以看到的索引范围的内容
    const [minIndex, maxIndex] = getRange()
    const pages = new Set()
    for (let i = minIndex; i <= maxIndex; i++) {
        pages.add(getPage(i, SIZE))  //获取当前视口中需要加载的页面集合pages
    }
    for (const page of pages) {
        const [minIndex, maxIndex] = getIndexRange(page, SIZE)
        //   console.log(minIndex, maxIndex)
        if (continer.children[minIndex].dataset.loaded) { //防止已经加载过的重复加载
            continue;
        }
        continer.children[minIndex].dataset.loaded = true

        getVideo(page, SIZE).then(async (res) => {   //循坏模拟获取数据的列表

            for (let i = minIndex; i <= maxIndex; i++) {
                const item = continer.children[i] 	//item is a div element.
                const offset = await getOffset(currentId)
                item.innerHTML = `
                    <img src="${res[i - minIndex].cover}"  />
                    <span style='color:#f00'>${i} ${item.dataset.index == offset ? '---刚刚看过!' : ''}</span>
                `
            }
        })
    }
    setIndicatorVisible()

}

//判断当前位置是否需要展示刚刚看过的按钮
async function setIndicatorVisible(){
    const offset = await getOffset(currentId)
    const [minIndex, maxIndex] = getRange() 	//currentId is a div element.  offset is the top left of the element.  (0,0) is the top left of
    const page = getPage(offset, SIZE)
    // console.log(minIndex, maxIndex, offset)
    if(offset>=minIndex && offset<=maxIndex){
     indicator.style.display = 'none'	//display the indicator element.  (the div element)  (the top left of the element)  (0,
    } else indicator.style.display = 'block'	
 
    indicator.dataset.page = page
    indicator.dataset.index = offset
 }

indicator.onclick = () => {
  const page = +indicator.dataset.page 	//page is a number.  + indicator.dataset.page is a string.  + indicator
  const index = +indicator.dataset.index 	//index is a number.  + indicator.dataset.index is a string
  createElement(page)
  continer.children[index].scrollIntoView({
    behavior:'smooth',
    block:'center'
  })
}

const loadPagesDebounce = debounce(loadPages, 300)

createElement(1) //首次先加载一页
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* body,html{
        position: relative;
    } */
    .continer{
        display: grid;
        /* grid-gap: 20px; */
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 10px;
        grid-row-gap: 15px;
        /* flex-wrap: wrap; */
        padding: 0 200px;
        box-sizing: border-box;
    }
    .item{
        width: 200px;
        height: 300px;
        border: 1px solid #000;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    .item img{
        width: 200px;
        height: 280px;
        object-fit: cover;
    }
    .indicator{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 20px;
        width: 100px;
        margin: 0 auto;
        text-align: center;
        /* display: none; */
        background: #f00;
        color: #fff; /* for IE */
    }
</style>
<body>
    <div class="continer">
        
    </div>
   <div class="indicator">前往刚刚看过</div>
</body>
<script type="module" src="./loadPages/index.js"></script>
<script type="module" src="./loadPages/api.js"></script>
</html>