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

需求:

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

 

 

/**
 * 获取滚动位置:避免刷新时滚动条默认置顶
 * 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')//移除右侧内容滚动条位置

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值