refactor(core): add scroll event

src/core/event/index.js

@@ -2,11 +2,6 @@ import { isMobile } from '../util/env'
 import { body, on } from '../util/dom'
 import * as sidebar from './sidebar'
 
-export function eventMixin (Docsify) {
-  Docsify.prototype.$resetEvents = function () {
-  }
-}
-
 export function initEvent (vm) {
   // Bind toggle button
   sidebar.btn('button.sidebar-toggle')

src/core/event/scroll.js

@@ -1,10 +1,89 @@
+import { isMobile } from '../util/env'
+import * as dom from '../util/dom'
+
 export function scrollActiveSidebar () {
+  if (isMobile) return
 
+  let hoverOver = false
+  const anchors = dom.findAll('.anchor')
+  const sidebar = dom.find('.sidebar')
+  const wrap = dom.find(sidebar, '.sidebar-nav')
+  const height = sidebar.clientHeight
+
+  const nav = {}
+  const lis = dom.findAll(sidebar, 'li')
+  let active = dom.find(sidebar, 'li.active')
+
+  for (let i = 0, len = lis.length; i < len; i += 1) {
+    const li = lis[i]
+    const a = li.querySelector('a')
+    if (!a) continue
+    let href = a.getAttribute('href')
+
+    if (href !== '/') {
+      const match = href.match('#([^#]+)$')
+      if (match && match.length) href = match[0].slice(1)
+    }
+
+    nav[decodeURIComponent(href)] = li
+  }
+
+  function highlight () {
+    const top = dom.body.scrollTop
+    let last
+
+    for (let i = 0, len = anchors.length; i < len; i += 1) {
+      const node = anchors[i]
+
+      if (node.offsetTop > top) {
+        if (!last) last = node
+        break
+      } else {
+        last = node
+      }
+    }
+    if (!last) return
+    const li = nav[last.getAttribute('data-id')]
+
+    if (!li || li === active) return
+    if (active) active.classList.remove('active')
+
+    li.classList.add('active')
+    active = li
+
+    // scroll into view
+    // https://github.com/vuejs/vuejs.org/blob/master/themes/vue/source/js/common.js#L282-L297
+    if (!hoverOver && dom.body.classList.contains('sticky')) {
+      const curOffset = 0
+      const cur = active.offsetTop + active.clientHeight + 40
+      const isInView = (
+        active.offsetTop >= wrap.scrollTop &&
+        cur <= wrap.scrollTop + height
+      )
+      const notThan = cur - curOffset < height
+      const top = isInView
+        ? wrap.scrollTop
+        : notThan
+          ? curOffset
+          : cur - height
+
+      sidebar.scrollTop = top
+    }
+  }
+
+  dom.off('scroll', highlight)
+  dom.on('scroll', highlight)
+  dom.on(sidebar, 'mouseover', () => { hoverOver = true })
+  dom.on(sidebar, 'mouseleave', () => { hoverOver = false })
 }
 
-export function scrollIntoView () {
-
+export function scrollIntoView (id) {
+  const section = dom.find('#' + id)
+  section && setTimeout(() => section.scrollIntoView(), 0)
 }
 
-export function scroll2Top () {
+const scrollEl = dom.$.scrollingElement || dom.$.documentElement
+
+export function scroll2Top (offset = 0) {
+  scrollEl.scrollTop = offset === true ? 0 : Number(offset)
 }

src/core/fetch/index.js

@@ -2,6 +2,8 @@ import { get } from './ajax'
 import { callHook } from '../init/lifecycle'
 import { getRoot } from '../route/util'
 import { noop } from '../util/core'
+import { scrollIntoView } from '../event/scroll'
+import { getAndActive } from '../event/sidebar'
 
 export function fetchMixin (Docsify) {
   let last
@@ -57,7 +59,8 @@ export function fetchMixin (Docsify) {
 export function initFetch (vm) {
   vm._fetchCover(vm)
   vm._fetch(result => {
-    vm.$resetEvents()
+    scrollIntoView(vm.route.query.id)
+    getAndActive('nav')
     callHook(vm, 'doneEach')
   })
 }

src/core/index.js

@@ -2,7 +2,6 @@ import { initMixin } from './init'
 import { routeMixin } from './route'
 import { renderMixin } from './render'
 import { fetchMixin } from './fetch'
-import { eventMixin } from './event'
 import initGlobalAPI from './global-api'
 
 function Docsify () {
@@ -13,7 +12,6 @@ initMixin(Docsify)
 routeMixin(Docsify)
 renderMixin(Docsify)
 fetchMixin(Docsify)
-eventMixin(Docsify)
 
 /**
  * Global API