add offset feature to scrollBehavior

Author: sigerello

examples/scroll-behavior/app.js

@@ -10,7 +10,8 @@ const Bar = {
     <div>
       bar
       <div style="height:500px"></div>
-      <p id="anchor">Anchor</p>
+      <p id="anchor" style="height:500px">Anchor</p>
+      <p id="anchor2">Anchor2</p>
     </div>
   `
 }
@@ -29,6 +30,11 @@ const scrollBehavior = (to, from, savedPosition) => {
     // scroll to anchor by returning the selector
     if (to.hash) {
       position.selector = to.hash
+
+      // specify offset of the element
+      if (to.hash === '#anchor2') {
+        position.offset = { y: 100 }
+      }
     }
     // check if any matched route config has meta that requires scrolling to top
     if (to.matched.some(m => m.meta.scrollToTop)) {
@@ -64,6 +70,7 @@ new Vue({
         <li><router-link to="/foo">/foo</router-link></li>
         <li><router-link to="/bar">/bar</router-link></li>
         <li><router-link to="/bar#anchor">/bar#anchor</router-link></li>
+        <li><router-link to="/bar#anchor2">/bar#anchor2</router-link></li>
       </ul>
       <router-view class="view"></router-view>
     </div>

src/util/scroll.js

@@ -45,7 +45,9 @@ export function handleScroll (
     if (isObject && typeof shouldScroll.selector === 'string') {
       const el = document.querySelector(shouldScroll.selector)
       if (el) {
-        position = getElementPosition(el)
+        let offset = shouldScroll.offset && typeof shouldScroll.offset === 'object' ? shouldScroll.offset : {}
+        offset = normalizeOffset(offset)
+        position = getElementPosition(el, offset)
       } else if (isValidPosition(shouldScroll)) {
         position = normalizePosition(shouldScroll)
       }
@@ -76,13 +78,13 @@ function getScrollPosition (): ?Object {
   }
 }
 
-function getElementPosition (el: Element): Object {
+function getElementPosition (el: Element, offset: Object): Object {
   const docEl: any = document.documentElement
   const docRect = docEl.getBoundingClientRect()
   const elRect = el.getBoundingClientRect()
   return {
-    x: elRect.left - docRect.left,
-    y: elRect.top - docRect.top
+    x: elRect.left - docRect.left - offset.x,
+    y: elRect.top - docRect.top - offset.y
   }
 }
 
@@ -97,6 +99,13 @@ function normalizePosition (obj: Object): Object {
   }
 }
 
+function normalizeOffset (obj: Object): Object {
+  return {
+    x: isNumber(obj.x) ? obj.x : 0,
+    y: isNumber(obj.y) ? obj.y : 0
+  }
+}
+
 function isNumber (v: any): boolean {
   return typeof v === 'number'
 }

test/e2e/specs/scroll-behavior.js

@@ -3,7 +3,7 @@ module.exports = {
     browser
     .url('http://localhost:8080/scroll-behavior/')
       .waitForElementVisible('#app', 1000)
-      .assert.count('li a', 4)
+      .assert.count('li a', 5)
       .assert.containsText('.view', 'home')
 
       .execute(function () {
@@ -47,6 +47,11 @@ module.exports = {
       .assert.evaluate(function () {
         return document.getElementById('anchor').getBoundingClientRect().top < 1
       }, null, 'scroll to anchor')
+
+      .click('li:nth-child(5) a')
+      .assert.evaluate(function () {
+        return document.getElementById('anchor2').getBoundingClientRect().top < 101
+      }, null, 'scroll to anchor with offset')
       .end()
   }
 }