Macでwordpressを開発している最中に、表題の件が発生するようになった。

管理画面、フロント関係なくスクロールしていると、存在しないはずの余白が生まれていき、スクロールし続けると際限なく伸びていく。メインの開発端末でのみ発生し、同じサイトをwindowsやスマホで確認してみても発生していない。

いろいろ原因を探っていると、どうやらMac + wordpress + chrome系のブラウザ + 特定のマウスという組み合わせでのみ発生することが判明した。特定のマウスというのはLogicoolのMX Masterシリーズ。僕はMX Master2と3を両方使っていて、両方ともでこの現象が発生し、Magic Mouseなど他のマウスでは発生しなかった。

このマウスは完成度が素晴らしく使い心地も最高なのだけど、使ったことがある人は分かるだろうがスクロールが特殊な仕様になっていて、スクロールホイールをゆっくり回すと通常のマウスのようにカリカリといった感触があるのだがある程度以上の速度で回すと、magic mouseのように慣性スクロールのような挙動をするようになる。

どうやらこの特殊なスクロール仕様が悪さをしているようで、

Mac + wordpress + chrome系のブラウザ + このマウス

このどれかを変えるだけで発生しない。

CSSで解決する

どうにかハードウェアを変更せずに対応できないかと調べていたところ、こちらの記事を発見

Macのブラウザでこれ以上スクロールできない場所までスクロールしたのに、そこからさらに先へスクロールしようとすると画面が伸びて指を離すと跳ね返るような挙動になります。

要は「これ以上スクロールできませんよ」とユーザーに知らせるためのインタラクションです。

他にも左右にスワイプしたときにスマホの場合は「戻る」「進む」の挙動になるブラウザがあります。

このようなスマホブラウザ特有のスワイプ関連の機能は、デザインや作成したい機能によってオフにしたい場合があります（ウェブサイトというより、ウェブサービスの実装の場合は特に多いです）。

現状Safariには使えませんが、それ以外のブラウザでは使えるのがoverscroll-behaviorです。

https://webrandum.net/css-overscroll-behavior/

この挙動がMX Masterのスクロールと相性が悪い気がして試してみたところビンゴ！

body{
  overscroll-behavior:none;
}

これだけで余白は発生しなくなった。

管理画面にも適用する場合は以下のコードをfunctions.phpに追記し、管理画面用のCSSを読み込む。

add_action('admin_enqueue_scripts', 'enqueue_admin_style_script');
function enqueue_admin_style_script()
{
	wp_enqueue_style('admin-style', get_template_directory_uri().'/css/admin.css');
}

admin.cssには

body.wp-admin{
  overscroll-behavior:none;
}

と入力しておけば、管理画面でも無限スクロール現象は発生しない。

Mac + wordpress + MX Masterで同様の現象が発生している人は試してみてほしい。