更新行をスクロールバーに表示するUserScript
from 2022/03/02
よくできているので標準機能になりそう (
談)
標準になった模様 2022/3/9
UserScript不要になったので、更新行をスクロールバーに表示というページを作りました 
VSCodeでよく見かけるやつだ！
少し書き換えて使ってみた
dead code消したりevent listenerを単純にしたり函数に切り分けたりした
Smartphoneでもちゃんと使える！
日記ページの更新を確認するのが楽になった
今まではStreamを見るか直接スクロールして確認するかしかなかった
更新部分を押したらそこにジャンプするようにしたい
スクロールバーと干渉するから難しいかも
できた！
細いところ押しづらそう
非常に細いのは押しづらい
更新してない箇所も含めて全面クリックできるようにすればいいかも
スクロールバーってクリックしたところにジャンプするようには出来ないのだろうか？
実装思いついたのでやってみます
まあちょっと手を加えるだけだけど
2022-03-08 12:45:25 実装しました！
スマホで動かなくなっちゃった？
見当はついている
明日直すか
参加していないprojectでも使えるようにすると非常に便利
更新箇所へひとっ飛びできる
TamperMonkeyとかですか？
です
リアルタイムに更新されているページで使うのも便利
e.g. 日記ページ
同じページの別の場所書き込まれていることに気づけて、かつワンタップでそこに飛べる
最近日記ページが長いので便利
更新されてないところも、行の雰囲気を表示できたらミニマップみたいになる?
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.backgroundColor = 'var(--telomere-unread, #52ba68)'
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) // ページリストに飛んだらリセット