【JavaScript】要素が横スクロール可能か判定する

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptで要素が横スクロール可能か判定する方法をご紹介しています。

JavaScriptで要素が横スクロールできるか確認したいな。良い方法ないかな?

上記の疑問にお答えします。

では、解説していきます。

横スクロールの判定について

横スクロールの判定方法について説明します。JavaScriptで要素が横スクロール可能であるかを判定する方法はいくつか選択肢があると思いますが、本記事では下記の手順でスクロール可能な要素か判定します。

  • 指定した要素のwidthを取得する
  • 指定した要素の子要素のwidthを取得した
  • 指定した要素のwidthと子要素のwidthを比較する
  • 子要素のwidthの値が大きければ横スクロール可能と判定する

要素が横スクロール可能か判定する

前項の判定方法をふまえて、要素が横スクロール可能であるかを判定します。検証用として、対象の要素と子要素にはCSSでwidthpxで固定値を指定します。下記に記載しているサンプルでは、子要素が横スクロール可能な状態となります。

HTML

<div class="target">
    <table>
        <tbody>
            <tr>
                <th>...</th>
                <td>...</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

.target {
    width: 500px;
    margin: 0 auto;
    overflow-y: auto;
}

table {
    display: table;
    width: 1280px;
    border-collapse: collapse;
}

table th,
table td {
    padding: 10px 20px;
    border: 1px solid #384878;
    
}

JavaScript

//対象要素取得
const target = document.querySelector('.target');
//対象要素の中で最初に出現する子要素を取得
const targetChild = target.children[0];

//対象要素と子要素をwidthを比較
if(target.clientWidth < targetChild.clientWidth){
    console.log('横スクロール可能です');
} else {
    console.log('横スクロールの必要はありません');
}

実行結果

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

実行結果は表示上に変化はありませんが、コンソールにメッセージを出力するようにしています。ブラウザの開発ツールを開いてコンソールをご確認ください。埋め込み右上の「EDIO ON CodePen」からソースを確認したり編集したりできますので、色々なパターンで試してみてください。

最後に

本記事の内容を肉付けするとスマホサイトなどでよく見かけるスクロールヒントを自作できると思います。横スクロールの位置はscrollLeftで取得することができるので、興味がある方は自分だけのスクロールヒントを自作してみてもいいかもしれませんね。

以上、JavaScriptで要素が横スクロール可能か判定する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら