fukuchancat / qiita-scroll-sync Goto Github PK
View Code? Open in Web Editor NEWQiitaの投稿画面のエディタ(左)・プレビュー(右)の同時スクロールを改善し、各見出しを基準にスクロール位置を合わせるようにするユーザースクリプトです。
Home Page: https://qiita.com/m_fukuchan/items/2a0c1f7b45894449ff56
Qiitaの投稿画面のエディタ(左)・プレビュー(右)の同時スクロールを改善し、各見出しを基準にスクロール位置を合わせるようにするユーザースクリプトです。
Home Page: https://qiita.com/m_fukuchan/items/2a0c1f7b45894449ff56
編集中の記事の最初に見出しが存在する場合において, プレビュー側の見出しが 1 つずれるという状況が発生しました.
調査したところ, 最初に見出しが存在する場合に x 座標側が [0, 0, ...]
と始まるようになっているにもかかわらず, y 座標側は [0, 0, ...]
と始まらないため座標の要素の対応がおかしくなっています.
y 座標のデータを計算する部分も, 最初に見出しが存在する場合は先頭に 0
を挿入するように修正する必要があるようです.
現在の Qiita では DOM 要素の class 指定が変わっているため, スクリプト内での querySelector
呼び出しが null
を返すために動作しません.
当該部分を直そうとしてみましたが, querySelector
部分を直すだけでは以下の問題も発生して改善しなかったため PR ではなく Issue として立てます.
DOMContentLoaded
より後のタイミングになったため, 編集画面を開いてこのスクリプトが読み込まれてから一旦再読み込みをしない限り, プレビュー側の要素を取得できずにスクリプトが動作しない.[0, 0, ...]
と始まらないためプレビュー側の見出しが 1 つずれる.querySelector
の部分のみの修正を PR として作成した後に, 上記を別々の issue へと分けようかと考えています. どういたしましょうか?
Markdown プレビューが読み込まれるタイミングが DOMContentLoaded
より後の非同期なタイミングになりました.
この変更の影響で, 編集画面を開いてこのスクリプトが読み込まれてもプレビュー側の要素を取得できず正常に動作しません. 一旦再読み込みをすれば, タイミングによっては動作します.
なんらかの手段でプレビューの読み込みを待つように修正する必要があります.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.