问题描述:页面刷新滚动条不返回到最初到位置而是返回之前浏览的位置
要点:通过sessionStorage设置获取刷新页面前的滚动条位置
<div id="outterBox" style="width: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值
来源:http://www.cnblogs.com/shuhaonb/p/11196878.html