由于 div 的高度，页面未从顶部开始

Question

我目前正在使用 Vuejs 并路由到其他页面。对于我的 link 照片，我想要一张覆盖整个屏幕的主封面照片。

<template>
    <div id="album-container">

     <div class="cover-image"></div>

     <section class='intro'>Lorem </section>

     <div class="image-flex-wrap">
        <div class="image-cell" v-for="image in images">
            <img :src="image">
        </div>
     </div>

    </div>
</template>



.cover-image {
   background: url('my photo') #fff  no-repeat center center;
   background-size: cover;
   height: 100vh;
}

这按我想要的方式显示页面，但是当我从之前向下滚动的页面路由到此页面时，问题就出现了。它不是从页面顶部开始，而是从我的封面图片的中间开始 div。我认为问题与高度有关：100vh，因为如果我将其替换为位置：绝对和 100% 的宽度，那么页面将从顶部开始。但是，我想避免使用绝对定位，但我对 css 的了解还不足以理解为什么会发生这种情况。

Answer 1

可能也与你的vue-router配置的scrollBehaviour有关，尝试在配置中添加以下scrollBehaviour：

export default new Router({
  mode: 'history',
  scrollBehavior: (to, from, savedPosition) => {
    if (to.hash) {
      return {selector: to.hash}
    } else {
      return {x: 0, y: 0}
    }
  },
  routes: [
    { path: '/', component: landingView },
     ....
     ....
    { path: '/healthcheck', name: 'healthcheck', component: healthCheckView }
  ]
})

Answer 2

感谢您的建议。

事实证明问题与 Vuejs 无关。我没有提到我正在使用 Material Design Lite，因为我没想到它是原因，但不幸的是。由于它的工作方式，您不再通过 MDL 提供的 .mdl-layout__content class 在 window 对象上滚动。这就是与 window 相关的所有滚动属性都返回 0 的原因。

我只是在我的路线上设置了一个 watch 方法来强制 scrollTop。

watch: {
 $route() {
  document.getElementsByClassName('mdl-layout').scrollTop = 0;
 }
}

由于 div 的高度，页面未从顶部开始

Page doesn't start at the top due to height of div

html

css

vue.js

material-design-lite

vue-router