2023-10

Web制作

【CSS】モーダルウインドウ実装時に後ろの要素がスクロールするのを防ぐ (スクロール連鎖防止)

モーダルウインドウなどposition: fixedでスクロール可能な要素を固定して配置した場合、要素の下部の境界に到達するとブラウザは次にbody要素をスクロールし始めてしまいます。「overscroll-behavior」にcontainまたはnoneを指定することで、スクロール連鎖を止める事ができます。
フォーム

Google reCAPTCHA V3を導入する

PHPメールフォームにGoogle reCAPTCHA V3を設置する方法です。細かい処理はお好みでどうぞ。
Web制作

JavaScriptでスクロールを監視するならIntersection Observerが便利

Intersection Observerは、特定の領域を監視して、監視対象の要素がその領域に交差したかどうかを検知します。デフォルトでは、viewport(見えている範囲)とある要素が交差した場合に、何かを実行します。