首页 > 其他 > 详细

为什么scrollTop总是返回0

时间:2021-03-27 12:26:34      阅读:42      评论:0      收藏: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()了!

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

为什么scrollTop总是返回0

原文:https://www.cnblogs.com/lyzz1314/p/14585205.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!