意外と良いかも！ スマートフォンなどでWebサイトを見ていて、画像が後から読み込まれるためにコンテンツの高さが変わって誤ったタップをしてしまうことがあります。多くの場合バナーなどで、とてもイライラします。 そんなサイトに導入して欲しいのがScrollbearです。画像が読み込まれても読んでいるコンテンツの高さが変わらないライブラリです。

Scrollbearの使い方

左がScrollbear導入済み、右は未導入です。画像が読み込まれる度にコンテンツががくがくと動きます。

Scrollbearを導入しておけばコンテンツが動くことはありません。ただし画像の高さを予め定めておけば良いわけで、ユーザがコンテンツを作るような画像の有無が分からないようなサイトに使うのが良さそうです。

ScrollbearはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Scrollbear – Make your blog more smooth! ‎changbenny.github.io/scrollbear/demo/static_img.html changbenny/scrollbear: A modern tool that maintains scroll position when images loaded