• 设置scrollTop无效


    问题描述:页面刷新滚动条不返回到最初到位置而是返回之前浏览的位置
    要点:通过sessionStorage设置获取刷新页面前的滚动条位置
    <div id="outterBox" style="100%;height:100%;background:yellow;overflow: auto">
    <div id="innerBox" style="background:red">aaaa</div>
    </div>
     
    innerBox的高度由内容撑开且通过后端接口获取数据
    ...
    //
    let scrollToTop = Number(window.sessionStorage.getItem('top'))
    ...
    getRebuildDataResultService(updateId, centerId).then(resp => {
    if (resp.errorcode == 100) {
    let respLog = resp.data && resp.data[0] && resp.data[0].log
    // respLog = respLog.join('<br/>')
    logs += '<div style="font-size:14px;font-weight:normal;">'
    logs += respLog
    logs += '</div>'
    let dom = document.getElementById('outterBox')
    dom.innerHTML = logs
    setTimeout(() => {
    dom.scrollTop = scrollToTop || 0
    }, 0)
    }
    })
    ...
    //dom元素滚动时,保存滚动条位置到缓存
    function setScrollY (e) {
    let top = dom.scrollTop || 0
    window.sessionStorage.setItem('top', top)
    }
    let dom = document.getElementById('outterBox')
    dom.addEventListener('scroll', setScrollY)
     
    使用
    $(window).load(function () {
    // let dom = document.getElementById('outterBox')
    // let scrollToTop = window.sessionStorage.getItem('top')
    // if (scrollToTop) {
    // dom.scrollTop = Number(scrollToTop)
    // }
    // })
    时无法将滚动条高度赋值给dom元素??
    存在问题:当页面加载后,innerBox中的数据还没从后端返回,无法获取到innerBox的高度(设置scrollTop前提必须是存在滚动条)
    解决办法:
    setTimeout(() => {
    dom.scrollTop = scrollToTop || 0
    }, 0)
    }
    使用setTimeout在后端数据返回,并写入dom中后,设置scrollTop值
     
     
  • 相关阅读:
    [剑指 Offer 18. 删除链表的节点]
    [922. 按奇偶排序数组 II]
    [905. 按奇偶排序数组]
    Linux信号机制
    [1470. 重新排列数组]
    linux常用命令全称
    pidof查看服务的PID
    运行shell脚本提示syntax error near unexpected token `$'do ''
    influxdb安装
    jvm堆内存设置问题Java heap space、GC overhead limit exceeded
  • 原文地址:https://www.cnblogs.com/shuhaonb/p/11196878.html
Copyright © 2020-2023  润新知