关于scrollTop获取为0 无法赋值问题问题: 最近测试提出一个问题,A页面是滚动视图,如果滚动到最下面,然后点击

问题: 最近测试提出一个问题,A页面是滚动视图,如果滚动到最下面,然后点击编辑按钮跳转到B页面,B页面top并不是最顶端,而是向下滚动了一段距离,想要实现进入新页面显示在顶端.

第一次尝试:

let container = document.getElementById('container');
container.scrollTop = 0;

测试一下,毫无效果,当时查了很多资料,差不多都是这么说的,没有太多有价值的线索,所以只能自己尝试...

第二次尝试: 当时猜测有可能是父元素高度的问题,所以写了一个简单的demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            height: 300px;
            overflow: scroll;
        }
        .header{
            background-color: lightblue;
            height: 100px;
        }
        .footer{
            background-color: lightcoral;
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="header"></div>
        <div class="footer"></div>
    </div>
    <script>
        let box = document.getElementById('box');
        box.scrollTop = 50;
    </script>
</body>
</html>

结果很轻松的解决了之前的那个问题,最后又尝试了把 box height 设置为 100%,之后再测试,js中的代码就不在起作用了,所以父控件的高度是否具体,直接决定 scrollTop是否有效.

在vue+element中的操作

<!-- main.vue -->
<el-main id="el-main" style="background-color: #fafbfc; padding: 0; min-width:1018px;">
   <router-view />
</el-main>

这块是在放置路由坑位的地方, 添加一个 id="el-main"的属性,供后面获取使用

// 监听浏览器窗口变化, 然后动态的设置el-main的高度
changeHandle(){
   let elMain = document.getElementById('el-main');
   elMain.style.height = window.innerHeight - 60 + 'px';
}

下面是在路由守卫中处理

// 在 vue-router 的全局守卫中设置刚才绑定的路由坑位的scrollTop, 即可全局实现
router.afterEach((to, from) => {
  Vue.nextTick(() => {
    let elMain = document.getElementById('el-main');
    elMain.scrollTop = 0;
  })
})

这是我想到的解决不能滚动或者赋值 scrollTop为空的原因和尝试,如果有更好的解决方案,欢迎评论,指正~