WordPressの5.0が出そうで出ないので、ドキドキしているyanagimachiです。
「Gutenberg」エディタはプラグインで何度か使ってみたのですが、まだ使い慣れていないので精進したいところです。


さて、表題のアレ、先日公開したバシャログ。メンバー所属のシーブレインWebソリューション事業部のサイトでも起こっていますね。ページの一番下でグイグイ上にスワイプすると領域外っぽい白い(bodyの背景の色)ところが表示されてしまいます。
20181204_yanagimachi_02.gif
※ちなみにAndroid/Chromeだと下からもやのようなものが出ます。

これは何?

上下のスクロール領域の境界に到達したときに、「もうこれ以上スクロールができない」ことを表すインタラクション(下の場合はバウンスエフェクト)のようです。

CSSやJSでは何か設定できるの?

overscroll-behaviorというCSSのプロパティがあるのですが、まだiOSには対応していません。
Android/Chromeでは以下のCSSを追加すると、もやが消えました。

body {
    overscroll-behavior: none;
}

上記のCSSでは、他にも最上部スクロールでの更新も無くなりました。


タッチデバイスで起きるこの現象ですが、そういう理由だったんですね。
まだiOSではCSSのみで対応できませんが、対応されたら上手く使いたいものです。

Source: バシャログ

よろしかったらシェアお願いします