zoukankan      html  css  js  c++  java
  • 设置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值
     
     
  • 相关阅读:
    Linux 下安装 numpy 和 scipy
    排序算法总结
    机器学习&数据挖掘笔记_16(常见面试之机器学习算法思想简单梳理)
    Java读取Excel并解析文本(并格式化输出)
    快捷键记忆
    初级应该学习的
    深入理解加密、解密、数字签名和数字证书
    数据签名和验签
    POI结构与常用类
    exlipse继承反编译插件
  • 原文地址:https://www.cnblogs.com/shuhaonb/p/11196878.html
Copyright © 2011-2022 走看看