设置scrollTop无效

问题描述：页面刷新滚动条不返回到最初到位置而是返回之前浏览的位置

要点：通过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值

 

 

转载于:https://www.cnblogs.com/shuhaonb/p/11196878.html