更新行をスクロールバーに表示するUserScript

https://gyazo.com/69fe5959a567eeb602c94f6afbe9afab

標準になった模様 2022/3/9

少し書き換えて使ってみた

dead code消したりevent listenerを単純にしたり函数に切り分けたりした

Smartphoneでもちゃんと使える！

今まではStreamを見るか直接スクロールして確認するかしかなかった

スクロールバーと干渉するから難しいかも

できた！

https://gyazo.com/ba92052d275a386f682a17db75d6b343.mp4

スクロールバーってクリックしたところにジャンプするようには出来ないのだろうか？

まあちょっと手を加えるだけだけど

2022-03-08 12:45:25 実装しました！

スマホで動かなくなっちゃった？

見当はついている

明日直すか

更新箇所へひとっ飛びできる

同じページの別の場所書き込まれていることに気づけて、かつワンタップでそこに飛べる

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) // ページリストに飛んだらリセット