刷新页面时，保留滚动条的位置

最新推荐文章于 2022-08-19 10:43:22 发布

漂亮得皮皮

最新推荐文章于 2022-08-19 10:43:22 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_36706903/article/details/91955899

本文介绍了一种在网页刷新时保持滚动条位置的方法，通过监听滚动事件并使用localStorage存储滚动位置，实现同一机器刷新页面时滚动条回到上次位置的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

同一个机器自动刷新时，滚动条保持上一次得滚动条位置，不是同一个机器的时候，横向滚动条会默认为在最左边，纵向滚动条会默认为置顶

/**
 * 获取滚动位置：避免刷新时滚动条默认置顶
 * ele:当前有滚动条的元素
 * name:存在localStorage里的名称
 * left:是否有横向滚动条
 * top:纵向滚动条
 */
scroolEvent(ele,name,top,left){
    ele.on('scroll', function(e) {
        let auto ;
        if (left&&top){
            auto = {
                left:$(this).scrollLeft(),
                top:$(this).scrollTop()
            }
        }
        else if (left&&!top) {//只有横向滚动条
            auto = {
                left:$(this).scrollLeft(),
            }
        }
        else if (!left&&top){//只有纵向滚动条
            auto = {
                top:$(this).scrollTop()
            }
        }
        localStorage.setItem(name,JSON.stringify(auto))
    })
},

/**
 * 同一机器得刷新，保留上一次得滚动条位置
 * ele:当前有滚动条的元素
 * last:上一个机器
 * current:当前机器
 * name:存在localStorage里的名称
 * left:是否有横向滚动条
 * top:纵向滚动条
 */
setRightScrool(ele,last,current,name,top,left){
    if (last&&last==current){
        let auto= JSON.parse(localStorage.getItem(name));
        if (auto){
            if (left&&top){
                ele.scrollLeft(auto.left)
                ele.scrollTop(auto.top)
            }
            else if (left&&!top) {//只有横向滚动条
                ele.scrollLeft(auto.left)
            }
            else if (!left&&top){//只有纵向滚动条
                ele.scrollTop(auto.top)
            }
        }
    }
    else {
        let auto ;
        if (left&&top){
            ele.scrollLeft(0)
            ele.scrollTop(0)
            auto = {
                left:0,
                top:0
            }
        }
        else if (left&&!top) {//只有横向滚动条
            ele.scrollLeft(0)
            auto = {
                left:0,
            }
        }
        else if (!left&&top){//只有纵向滚动条
            ele.scrollTop(0)
            auto = {
                top:0
            }
        }

        localStorage.setItem(name,JSON.stringify(auto));
    }
},

//调用
this.actions.scroolEvent( this.el.find('.right-content .data-wrap'),'RightMenu',true,false)
this.actions.setRightScrool(this.el.find('.right-content .data-wrap'),this.data.lastMachineName,this.data.machineName,'RightMenu',true,false);
//移除localStorage
localStorage.removeItem('RightMenu')//移除右侧内容滚动条位置