増井俊之

https://i.gyazo.com/ce44a0adde8a39df00cfa744d8f42d95.png

code:script.js

// ページ全体の更新された行を画面右端に表示

const container = document.createElement('div')

container.style.position = 'fixed'

container.style.top = '0px'

container.style.height = '100vh'

container.style.right = '0px'

container.style.zIndex = 10000

document.body.appendChild(container)

function render() {

const linesDiv = document.querySelector('.lines') // 行全体の高さをもつdiv

const linesRect = linesDiv.getBoundingClientRect()

const offset = document.documentElement.scrollTop

const H = document.body.scrollHeight

container.innerHTML = '' // remove all children

const unreads = Array.from(document.querySelectorAll('.telomere .unread'))

unreads.forEach(unread => {

const { top, height } = unread.getBoundingClientRect()

const bar = document.createElement('div')

bar.style.position = 'absolute'

bar.style.top = (top + offset) / H * 100 + '%'

bar.style.height = height / H * 100 + '%'

// bar.style.minHeight = '4px'

bar.style.width = '10px'

bar.style.right = '0px'

container.appendChild(bar)

})

}

render()

window.scrapbox.on('lines:changed', render)

window.scrapbox.on('layout:changed', render)

// 画像がロードされた時にlineの高さが変わるので再計算する

const watchLoad = () => {

document.querySelectorAll('img').forEach(element => {

element.addEventListener('load', render)

})

}

watchLoad()

window.scrapbox.on('page:changed', watchLoad)

// スクロールでフワッと出す

container.style.transition = 'all 0.4s'

const hide = () => {

container.style.opacity = '0.2' // 目を凝らせば見えるギリギリの透明度

}

let timerId = 0

window.addEventListener('scroll', () => {

container.style.opacity = '1.0'

window.clearTimeout(timerId)

timerId = window.setTimeout(hide, 4 * 1000) // 読んでいるうちに気づいたら消えている

})

window.scrapbox.on('layout:changed', hide) // ページリストに飛んだらリセット