cssでoverflow:auto;指定した時に、溢れているかどうかを判定する方法について

cssでoverflow:auto;指定した時に、溢れているかどうかを判定する方法があるかどうか調べております。
javascriptなどを駆使すれば、それらを判定出来るのかなと思っていはいるのですが、もっと簡単に判定できる方法があればご教授頂きたいと思い、投稿させていただきました。

やりたい事としては下記のサイトの Always responsive の部分のような横スクロールするテーブルにて、はみ出ている部分がある場合は、矢印などのアイコンを表示させて、スクロール出来る事をわかるように出来たら良いなと思っております。
https://getbootstrap.com/docs/4.0/content/tables/#always-responsive

そのような方法をご存知の方がいらっしゃいましたら、ご教授頂けますと助かります。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

質問者さんが実現したいことは以下のように行えると思いますが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
6    <title>タイトル</title>
7    <style>
8        * {
9            margin: 0;
10            padding: 0;
11        }
12
13        .bd-example {
14            position: relative;
15        }
16
17        .table {
18            width: 100%;
19            max-width: 100%;
20        }
21
22        .text {
23            display: none;
24        }
25
26        .text-overflow {
27            font-size: 5em;
28            position: absolute;
29            top: 50%;
30            right: 0;
31            transform: translate(-50%, -50%);
32            color: #f66;
33        }
34    </style>
35</head>
36<body>
37<div class="bd-example">
38    <span class="text arrow">→</span>
39    <div class="table-responsive">
40        <table class="table">
41            <thead>
42            <tr>
43                <th scope="col">#</th>
44                <th scope="col">Heading</th>
45                <th scope="col">Heading</th>
46                <th scope="col">Heading</th>
47                <th scope="col">Heading</th>
48                <th scope="col">Heading</th>
49                <th scope="col">Heading</th>
50                <th scope="col">Heading</th>
51                <th scope="col">Heading</th>
52                <th scope="col">Heading</th>
53            </tr>
54            </thead>
55            <tbody>
56            <tr>
57                <th scope="row">1</th>
58                <td>Cell</td>
59                <td>Cell</td>
60                <td>Cell</td>
61                <td>Cell</td>
62                <td>Cell</td>
63                <td>Cell</td>
64                <td>Cell</td>
65                <td>Cell</td>
66                <td>Cell</td>
67            </tr>
68            <tr>
69                <th scope="row">2</th>
70                <td>Cell</td>
71                <td>Cell</td>
72                <td>Cell</td>
73                <td>Cell</td>
74                <td>Cell</td>
75                <td>Cell</td>
76                <td>Cell</td>
77                <td>Cell</td>
78                <td>Cell</td>
79            </tr>
80            <tr>
81                <th scope="row">3</th>
82                <td>Cell</td>
83                <td>Cell</td>
84                <td>Cell</td>
85                <td>Cell</td>
86                <td>Cell</td>
87                <td>Cell</td>
88                <td>Cell</td>
89                <td>Cell</td>
90                <td>Cell</td>
91            </tr>
92            </tbody>
93        </table>
94    </div>
95</div>
96<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
97<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
98<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
99<script>
100    $(window).on("resize", function () {
101        if ($(".table-responsive").width() < $(".table").width()) {
102            $(".arrow").removeClass("text").addClass("text-overflow");
103        } else {
104            $(".arrow").removeClass("text-overflow").addClass("text");
105        }
106    });
107
108    $(function () {
109        if ($(".table-responsive").width() < $(".table").width()) {
110            $(".arrow").removeClass("text").addClass("text-overflow");
111        } else {
112            $(".arrow").removeClass("text-overflow").addClass("text");
113        }
114    });
115</script>
116</body>
117</html>