noteの上下に出てくる固定バナーを非表示にするブックマークレット用JS

個人的に毎回すごく邪魔なので作りました。あくまで個人的な話でそれ以上ではありません。

ブックマークレット用JSコード

javascript:(function(){
var style=document.createElement('style');
var head=document.querySelector('head');
style.setAttribute('type', 'text\/css');
style.innerHTML='.o-navBar,.o-shareBooster{display:none;}';
head.appendChild(style);
})();

上記をブラウザで新規ブックマークレット作成の際のURLに入れれば登録できるはずです。

作るに至った理由

note(https://note.com)では上に戻る方向にスクロールすると以下の順で３つの固定(追従)バナーが表示されます。

1. 該当ノートのタイトル(画面上部に表示)
2. SNSシェアボタン(画面下部に表示)
3. noteのヘッダー(画面上部に表示)

画面が狭くなるという理由ももちろんありますが、この「上に戻ろうとすると表示される」という動作が問題の部分です。

「上に戻る」という動作をする際には「上部にある内容を確認するため」という意図もあるわけで、つまりは上方向に表示されるはずのコンテンツを見たいがためです。この要求を持って上にスクロールした際に、上が隠されるようにバナーが表示されると邪魔されている感覚が強くなります。

追加が１つで幅も狭ければ「少し邪魔」で済んだかもしれませんが、1つ表示された後に2つ目が追加され、時間差で2度邪魔をしてきます。しかも2つ目は1つ目より高さが増しているとなると隠される面積は2倍以上です。

結果として「少し邪魔」程度ではなく明確に「不快」でした。

もともとたまにしか見ていなかったので今までは毎回開発者ツールにdisplay:none;を書いていましたが、それも面倒なのでブックマークレットを作ったという次第です。

結び

恐らく現在進行形でユーザーの反応を見た上での動作と状態だと思いますので、一般的には問題なく、サービス的には必要な要素のでしょう。嫌なら読むな的な考えもありますが、好んでnoteを見ているわけではなく単に「そこにしか公開されていないので我慢している」状態でした。そのため個人で対策を講じる必要がありました。