Need a way to set what scroll position is saved

[brad426]

Similar to the way you can define a scrollBehavior function on a router instance, I need a way to define how the savedPosition value gets computed/populated. I need to override the default behavior which stores the window's scroll position, and instead store the scroll position of another element.

My application uses a structure where the document/window stays static, and content scrolls inside of a container. Example: http://codepen.io/brad426/pen/pezRge

[LinusBorg]

Hi Brad.

just thinking out loud:

I think this won't be so easy to do since those two things - the scrollposition the router saves right now, and the scrollpostion of an arbitrary element - have not much in common, technically. One works with the popstate event and push() method of window.history, while the other requires to read and write to a certain DOM elements property.

Also, this functionality is not necessarily tied to router components, but could be useful to all sorts of components, which makes me think that it would be better to do this in a generic plugin/component ...

[posva]

The scrollBehavior could be an object instead of a function but as @LinusBorg I'm wondering if keeping this behaviour in a component isn't more flexible and reusable

[brad426]

Cool, thanks for your feedback.
I agree that this functionality would be useful to all sorts of components, but I think a lot of people might also find a "global" override useful.

Regarding my example app structure, I'd like to keep the router's functionality exactly as is, i.e. have it call saveScrollPosition whenever a popstate event is triggered, the only change would be to allow a custom handler for saveScrollPosition . Example:

const router = new VueRouter({
  mode: 'history',
  routes,
  saveScrollPosition() {
     let el = document.querySelector('.page-content')
     return { x: el.scrollLeft, y: el.scrollTop }
  }
})

[erguotou520]

@LinusBorg see my issue's program #1249 , is that possible to realize?

[blake-newman]

IMO, we should set a scrollEl property in main router config. Thus allowing us to use a specific scroll container for both scrollBehavior and scroll position.

What's everyone's opinion on this?

[Dadibom]

You don't need special functions for this, before/afterEach would be a much better place to put these kinds of things

[unamix]

It would be nice if we could somehow define from which element we want to save the scroll position.
In the meantime i solved it this way:

<keep-alive>
  <router-view></router-view>
</keep-alive>

const router = new VueRouter({
  mode: 'history',
  routes
})

const scrollableElementId = 'content' // You should change this
const scrollPositions = Object.create(null)

router.beforeEach((to, from, next) => {
  let element = document.getElementById(scrollableElementId)
  if (element !== null) {
    scrollPositions[from.name] = element.scrollTop
  }

  next()
})

window.addEventListener('popstate', () => {
  let currentRouteName = router.history.current.name

  let element = document.getElementById(scrollableElementId)
  if (element !== null && currentRouteName in scrollPositions) {
    setTimeout(() => element.scrollTop = scrollPositions[currentRouteName], 50)
  }
})

[kgrosvenor]

I think this would be a pretty good and obvious feature to add :D

[FEA5T]

@blake-newman I disagree, I think that each router-view (component) should define it's scrollEl with a local scrollEl property on the component, or a v-scrollEl directive in html.

In terms of encapsulation, each component could be from a different source, as an app could be composed of many separate components from different authors on the web. Each component know's which child element within needs to scroll. It would be inappropriate to let the app decide what element within all components should be scrollable (as you would have to go into each component and add the scroll class/id).

If anything, vue should implement an html directive ie: <div v-scrollEl></div> that vue automatically picks up to override scroll position tracking for that component only.

This way it:

1. Is up to the component what child element scrolls
2. Provides consistent syntax across components and teams for readability
3. Does not pollute router config