Cosense Toolbox
scroll-cursor-line-to-center
基盤#スクロール#カーソル#module

scroll-cursor-line-to-center

カーソルのある行を画面の中央までスクロールさせる最小の部品です（Vimの zz 相当）。Vim風のナビゲーションなど、画面表示を整える自作スクリプトを書くときに役立ちます。

デモ

デモ

インストール

設定ページの code:script.js に貼る
import { scrollCursorLineToCenter } from "/api/code/cosense-toolbox/scroll-cursor-line-to-center/module.js";
ソースコード全文を見る（JS）
export function scrollCursorLineToCenter() {
  const cursorLine = document.querySelector(".line.cursor-line");
  const { top, bottom } = cursorLine.getBoundingClientRect();
  const windowCenterPosition = window.innerHeight / 2;
  // カーソルが画面の中央からしたにある場合
  if (windowCenterPosition < top) {
    // したにスクロールして位置を調整する
    window.scrollTo({
      top: window.scrollY + (top - windowCenterPosition),
      left: 0,
      behavior: "smooth",
    });
  }
  // カーソルが画面の中央から上にある場合
  if (windowCenterPosition > top) {
    // 上にスクロールして位置を調整する
    window.scrollTo({
      top: window.scrollY - (windowCenterPosition - top),
      left: 0,
      behavior: "smooth",
    });
  }
}
元のCosenseページを見る ↗