美文网首页
锚点scrollIntoView遇到固定头部掩盖

锚点scrollIntoView遇到固定头部掩盖

作者: Hasan_hs | 来源:发表于2023-08-17 11:21 被阅读0次

    解决方案:

    参考了JSScrollIntoView插件,运用其核心代码解决此问题。

    第一步、方法复制到项目中
    /**
     * 
     * @param {*} elem 滚动的元素
     * @param {*} options 滚动配置
     */
    function scrollIntoView(elem, options) {
        options = {
            ...options,
            duration: 1000,
            offset: heander.value.clientHeight,
            ease: 'ease-out'
        }
     
        var scrollOffset = elem.getBoundingClientRect().top - options.offset,
            totalScrollOffset = window.scrollY + scrollOffset,
            duration = options.duration,
            startTime = Date.now(),
            distance,
            currentScrollPosition;
     
        requestAnimationFrame(function anim() {
            currentScrollPosition = window.scrollY;
            distance = totalScrollOffset - currentScrollPosition;
     
            var elapsed = Date.now() - startTime;
            var progress = Math.min(1, elapsed / duration);
     
            window.scrollTo(0, currentScrollPosition + (distance * progress));
     
            if (progress < 1 && distance !== 0) {
                requestAnimationFrame(anim);
            }
        });
    }
    
    第二步、调用方法
    scrollIntoView(elem,options)
    

    相关文章

      网友评论

          本文标题:锚点scrollIntoView遇到固定头部掩盖

          本文链接:https://www.haomeiwen.com/subject/asolmdtx.html