横スクロールバーの表示/非表示に合わせて、横スクロールメニューの両端に配置した矢印の表示/非表示を切り替えたい。

前提

横スクロールメニューを作っています。

動作サンプル

スクロールバーの位置が左端にある場合はメニューの右に矢印が表示され、バーの位置が右端にある場合はメニューの左に矢印が表示され、いずれの場合でもない場合は矢印が両方表示します。
また、矢印ボタンを押すとスクロール位置が移動します。

問題点

スクロールバーが表示されない状態（ウインドウサイズが大きい場合）でも、矢印が表示されます。

実現したいこと

スクロールバーが表示されなくなれば、矢印を非表示にしたいです。
また、ウインドウをリサイズした際にスクロールバーが表示されれば、矢印を表示したいです。

該当のソースコード

html
1<body>
2  <!-- ボタンエリア表示 -->
3  <button id="show">show</button>
4  <!-- ボタンエリア -->
5  <div id="buttonArea">
6    <nav class="menu">
7      <!-- 左矢印 -->
8      <button class="arrow arrow-left"><i class="fas fa-chevron-left"></i></button>
9      <!-- ボタン -->
10      <ul class="btn-wrap">
11        <li><button class="buttons"><i class="fab fa-html5"></i></button></li>
12        <li><label for="css" class="buttons"><i class="fab fa-css3-alt"></i><input type="checkbox" id="css"></label></li>
13        <li><button class="buttons"><i class="fab fa-js-square"></i></button></li>
14        <li><label for="python" class="buttons"><a id="python"><i class="fab fa-python"></i></a></label></li>
15        <li><button class="buttons"><i class="fab fa-php"></i></button></li>
16        <li><button class="buttons"><i class="fab fa-java"></i></button></li>
17      </ul>
18      <!-- 右矢印 -->
19      <button class="arrow arrow-right"><i class="fas fa-chevron-right"></i></button>
20    </nav>
21    <!-- ボタンエリア非表示 -->
22    <button id="hide">hide</button>
23  </div>
24  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
25  <script src="https://kit.fontawesome.com/cb48cdc9db.js"></script>
26</body>

css
1html {
2    text-align: center;
3}
4
5/* ボタン要素のデフォルトのスタイルをリセット */
6button {
7    background: none;
8    border: 0;
9    outline: none;
10    -webkit-appearance: none;
11    -moz-appearance: none;
12    appearance: none;
13}
14
15/* ボタンエリアの表示・非表示ボタン */
16#show {
17    border: 1px solid black;
18    cursor: pointer;
19    margin: 3%;
20}
21#hide {
22    border: 1px solid black;
23    cursor: pointer;
24    margin: 3%;
25}
26
27/* メニュー全体 */
28#buttonArea {
29    display: none;
30}
31.menu {
32    display: flex;
33    align-items: center;
34    justify-content: center;
35}
36
37/* 矢印 */
38.arrow {
39    cursor: pointer;
40}
41.arrow-left {
42    margin-right: 10px;
43}
44.arrow-right {
45    margin-left: 10px;
46}
47.arrow .fas {
48    font-size: 30px;
49}
50
51/* ボタンを囲む用 */
52.btn-wrap {
53    display: flex;
54    max-width: 50%;
55    overflow-x: auto;
56    overflow-y: hidden;
57    border: 1px solid #ccc;
58}
59.buttons {
60    display: inline-flex;
61    align-items: center;
62    justify-content: center;
63    box-sizing: border-box;
64    width: 70px;
65    height: 70px;
66    margin: 5px;
67    border: 5px solid #000;
68    background-color: #fff;
69    cursor: pointer;
70}
71.buttons .fab, .buttons .fas {
72    font-size: 50px;
73}
74.buttons a {
75    line-height: 0;
76}
77#css {
78    display: none;
79}

javascript
1// ボタンエリア表示・非表示ボタン
2$("#show").on("click", function () {
3    $("#buttonArea").show();
4    $(".btn-wrap").scrollLeft(0);
5    $(".arrow-left").css("visibility", "hidden");
6});
7$("#hide").on("click", function () {
8    $("#buttonArea").hide();
9});
10
11// 矢印ボタン ドラッグ 表示／非表示
12$(".btn-wrap").on("scroll", function () {
13    var scrollPosition = $(".btn-wrap").scrollLeft();
14    var maxPostion = $('.btn-wrap').get(0).scrollWidth - $('.btn-wrap').get(0).clientWidth;
15    if (scrollPosition === 0) {
16        $(".arrow-left").css("visibility", "hidden");
17        $(".arrow-right").css("visibility", "visible");
18    } else if (scrollPosition === maxPostion) {
19        $(".arrow-right").css("visibility", "hidden");
20        $(".arrow-left").css("visibility", "visible");
21    } else if (scrollPosition > 0 && scrollPosition < maxPostion) {
22        $(".arrow").css("visibility", "visible");
23    };
24});
25
26// 矢印ボタン 押下 表示／非表示
27$(".arrow-left").on("click", function () {
28    var scrollPosition = $(".btn-wrap").scrollLeft();
29    if (scrollPosition > 0) {
30        $(".btn-wrap").scrollLeft(scrollPosition - 40);
31        return;
32    };
33    $(".btn-wrap").scrollLeft(0);
34});
35$(".arrow-right").on("click", function () {
36    var scrollPosition = $(".btn-wrap").scrollLeft();
37    var maxPostion = $('.btn-wrap').get(0).scrollWidth - $('.btn-wrap').get(0).clientWidth;
38    if (scrollPosition < maxPostion) {
39        $(".btn-wrap").scrollLeft(scrollPosition + 40);
40        return;
41    };
42    $(".btn-wrap").scrollLeft(maxPostion);
43});

試したこと

overflow:auto のスクロールバーの表示/非表示を確認する
上記記事を参考にスクロールバーの有無をチェックするプラグインを作成し、ウインドウを読み込んだ際とウインドウがリサイズされた際のイベントとして、下記のように記述しました。

javascript
1jQuery.fn.hasScrollBar = function () {
2    return this.get(0) ? this.get(0).scrollWidth > this.innerWidth() : false;
3};
4
5$(window).on("ready", function () {
6    if (!$('.btn-wrap').hasScrollBar()) { // スクロールバーがなければ、矢印を非表示
7        $(".arrow-left").css("visibility", "hidden");
8        $(".arrow-right").css("visibility", "hidden");
9    };
10});
11$(window).on("resize", function () {
12    if (!$('.btn-wrap').hasScrollBar()) {
13        $(".arrow-left").css("visibility", "hidden");
14        $(".arrow-right").css("visibility", "hidden");
15    };
16});

結果は変わりませんでした。

x_x

2019/09/02 08:54

show ボタンを押した後には処理していませんが、そのことを言っています？

MajinBoo

2019/09/02 14:56

showボタンを押したあとはボタンエリアを表示しスクロールバーを左端にセットし、左矢印を非表示する処理をしています。試したことのコードは該当のソースコードのコードを省略した形で書いています。

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

回答1件

ベストアンサー

状態としては
・両方の矢印が表示されていない
・左矢印が表示されていて右矢印が表示されていない
・右矢印が表示されていて左矢印が表示されていない
・両方の矢印が表示されている
の四つが考えられます。

確かにスクロール直後であればスクロールバーが存在しているので「両方が表示されていない」というのはないのですが、同様の処理をあちこちに書くとわかりにくくなるので一か所にまとめておいたらどうでしょうか？
以下のような関数を表示時、リサイズ時、スクロール時に呼び出すようにします。

jQuery
1function fixArrowVisibility() {
2    var scrollPosition = $(".btn-wrap").scrollLeft();
3    var maxPostion = $('.btn-wrap').get(0).scrollWidth - $('.btn-wrap').get(0).clientWidth;
4    var arrowLeftVisibility = 'visible';
5    var arrowRightVisibility = 'visible';
6
7    if (scrollPosition === 0) {
8        arrowLeftVisibility = 'hidden';
9    }
10
11    if (scrollPosition === maxPostion) {
12        arrowRightVisibility = 'hidden';
13    }
14
15    $(".arrow-left").css("visibility", arrowLeftVisibility);
16    $(".arrow-right").css("visibility", arrowRightVisibility);
17}