为什么scrollTop总是返回0
像一个vue项目,子div可能作为一个页面的视窗大小
,高宽都是100vh/vw,这时候document.getElementById('wrapper').scrollTop
会一直返回0,而且同样的元素调用ScrollTo也会失效。
<template>
<div id="root">
<div>
<div>
<div>
<div>
<div>
<div id="wraper" style="height:100vh;width:100vw;position:relative">
<div style="height:90px"></div>
<div id="long" style="height:500vh;width:100vw;background:rgb(0,0,0,0.3)">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
这里有个坑,就是你必须指明会scroll的元素具有溢出后滚动的属性,虽然它默认就是溢出后滚动(默认值是auto),但是你还要指明一下。这个坑我搞了快一个上午,最后在以为外国博主Dani Kim的一片博客上面找到了答案
修改为
<template>
<div id="root">
<div>
<div>
<div>
<div>
<div>
<div id="wraper" style="overflow:scroll;height:100vh;width:100vw;position:relative">
<div style="height:90px"></div>
<div id="long" style="height:500vh;width:100vw;background:rgb(0,0,0,0.3)">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
就能够获取scrollTop并且设置scrollTo()了!
不得不说外国人写的技术博客真的好详细啊!