Webサイトは縦長のものが多く、スクロールを使うのが当たり前になっています。そんな中、埋め込みコンテンツでもスクロールできるようになっていると目的の部分にたどり着けずにストレスを感じるでしょう。 そうした問題を解決できるのがBody scroll lockです。埋め込みコンテンツではなく、メインコンテンツ側のスクロールをロックできます。

Body scroll lockの使い方

デフォルトの動きです。まず全体がスクロールして、途中の埋め込みコンテンツでスクロールが奪われます。

スクロールロックを有効にした場合、全体でのスクロールは無効になり、埋め込みコンテンツ側だけスクロールできます。

Body scroll lockはGoogle Chromeでは動きましたがSafariでは動かなかったので、一部のWebブラウザでは動かない可能性があります。スクロールは当たり前のように行う操作ですが、それがうまくいかないとストレスに感じることでしょう。良いUXを目指す上で参考にしたいソフトウェアです。

Body scroll lockはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

デモ willmcpo/body-scroll-lock: Body scroll locking that just works with everything ?