为什么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()了!

不得不说外国人写的技术博客真的好详细啊!

posted @ 2021-03-27 11:08  Bravo_Jack  阅读(626)  评论(0编辑  收藏  举报