由于 div 的高度，页面没有从顶部开始答案

【问题标题】：Page doesn't start at the top due to height of div由于 div 的高度，页面没有从顶部开始
【发布时间】：2017-06-26 21:18:03
【问题描述】：

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

<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 因为如果我用 position: absolute 和 100% 的宽度替换它，那么页面将从顶部开始。但是，我想避免使用绝对定位，但不知道足够的 CSS 来理解为什么会发生这种情况。

【问题讨论】：

这听起来好像是 Vue 中的路由问题——height: 100vh 在加载到 DOM 时应该始终覆盖 100% 的窗口高度。
我相信你可能是对的。每当我尝试访问 window.scroll(X/Y) 位置时，它总是返回 0。在我的路由中实现 VueJs ScrollBehaviour 也无济于事，即使它假设强制新页面从顶部开始。我花了一整天的时间试图解决这个问题，但无法找出原因。

标签： html css vue.js material-design-lite vue-router

【解决方案1】：

感谢您的建议。

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

我只是在我的路线上设置了一个监视方法来强制滚动顶部。

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

【讨论】：

【解决方案2】：

它也可能与您的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 }
  ]
})

【讨论】：