jyapayne/docsify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix sidebar scroll, fixed #63

Browse source
This commit is contained in:
qingwei.li 2017-01-27 12:44:05 +08:00
commit 7db1f1034a
2 changed files with 22 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/event.js
View file

@ -10,6 +10,8 @@ export function scrollActiveSidebar () {
let hoveredOverSidebar = false let hoveredOverSidebar = false
const anchors = document.querySelectorAll('.anchor') const anchors = document.querySelectorAll('.anchor')
const sidebar = document.querySelector('aside.sidebar') const sidebar = document.querySelector('aside.sidebar')
const sidebarHeight = sidebar.clientHeight
const nav = {} const nav = {}
const lis = sidebar.querySelectorAll('li') const lis = sidebar.querySelectorAll('li')
let active = sidebar.querySelector('li.active') let active = sidebar.querySelector('li.active')
@ -48,7 +50,25 @@ export function scrollActiveSidebar () {
li.classList.add('active') li.classList.add('active')
active = li active = li
!hoveredOverSidebar && !sticky.noSticky && active.scrollIntoView(false)
// scroll into view
// https://github.com/vuejs/vuejs.org/blob/master/themes/vue/source/js/common.js#L282-L297
if (!hoveredOverSidebar && !sticky.noSticky) {
const currentPageOffset = 0
const currentActiveOffset = active.offsetTop + active.clientHeight + 40
const currentActiveIsInView = (
active.offsetTop >= sidebar.scrollTop &&
currentActiveOffset <= sidebar.scrollTop + sidebarHeight
)
const linkNotFurtherThanSidebarHeight = currentActiveOffset - currentPageOffset < sidebarHeight
const newScrollTop = currentActiveIsInView
? sidebar.scrollTop
: linkNotFurtherThanSidebarHeight
? currentPageOffset
: currentActiveOffset - sidebarHeight
sidebar.scrollTop = newScrollTop
}
} }
window.removeEventListener('scroll', highlight) window.removeEventListener('scroll', highlight)

20
src/themes/basic/_layout.css
View file

@ -193,16 +193,7 @@ main {
transition: transform 250ms ease-out; transition: transform 250ms ease-out;
width: $sidebar-width; width: $sidebar-width;
z-index: 20; z-index: 20;
margin-bottom: 40px; border-right: 1px solid rgba(0, 0, 0, .07);
&::after {
content: '';
position: inherit;
left: calc($sidebar-width - 1px);
top: 0;
height: 100vh;
border-right: 1px solid rgba(0, 0, 0, .07);
}
> h1 { > h1 {
text-align: center; text-align: center;
@ -384,15 +375,6 @@ body.close {
position: fixed; position: fixed;
} }
.sidebar {
margin-bottom: 0;
border-right: 1px solid rgba(0, 0, 0, .07);
&::after {
content: none;
}
}
nav { nav {
margin-top: 16px; margin-top: 16px;
} }