0

I am currently working with Vuejs and routing to other pages. For my link to photos, I would like a main cover photo that covers the entire screen.

<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;
}

This displays the page the way I want it, but the problem arises when I am routed to this page from a page where I have previously scrolled down. Instead of starting at the top of the page, it begins around the middle of my cover-image div. I believe the problem has something to do with the height: 100vh because if I replace it with position: absolute and a width of 100%, then the page will start at the top. However, I would like to refrain from using absolute positioning but don't know enough css to understand why this is occurring.

TomMi DumMi
  • 193
  • 1
  • 1
  • 7
  • This sounds as though it is a routing problem in Vue -- `height: 100vh` should always cover 100% of the window height whenever it is loaded into the DOM. – Obsidian Age Feb 09 '17 at 02:11
  • I believe you may be right. Whenever I try to access the window.scroll(X/Y) positions, it always returns 0. Implementing the VueJs ScrollBehaviour in my routes doesn't help either even though it's suppose to force new pages to start at the top. I've spent all day trying to trouble shoot this but can't figure out the reason. – TomMi DumMi Feb 09 '17 at 02:29

2 Answers2

1

Thanks for the suggestions.

The issue turned out to be unrelated to Vuejs. I had failed to mention I was using Material Design Lite since I didn't expect it to be the cause but unfortunately it was. Due to the way it works, you no longer scroll on the window object by rather the .mdl-layout__content class supplied by MDL. This was why all scroll properties relating to window was returning 0.

I simply set up a watch method on my routes to force scrollTop.

watch: {
 $route() {
  document.getElementsByClassName('mdl-layout').scrollTop = 0;
 }
}
TomMi DumMi
  • 193
  • 1
  • 1
  • 7
0

It can probably be related to scrollBehaviour of your vue-router config as well, try to add following scrollBehaviour in the config:

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 }
  ]
})
Saurabh
  • 71,488
  • 40
  • 181
  • 244