javascriptもしくはJQueryを使用して横スクロールメニューで特定の条件の時のみ矢印マークを表示する方法

こんばんは、いつもお世話になっております。

現在webサイトで横スクロールメニューを実装しようとしているのですが、以下の条件で横にスクロールできることを促す矢印マークを表示したり消したりしたいです。

・スクロールメニューを全く触っていない(左端に寄っている時)
右端に右向きの矢印を表示する。

・スクロールを右に動かしている最中(左端にも右端にもたどり着いていない時)
左右両端に矢印を表示する。

・スクロールメニューを一番右まで動かした時
左端に左向きの矢印を表示する。

実際にサンプルコードを書いているのですが現在左端なのか右端なのかそれともどちらでもないのか等を判断するための方法がわかりません。。
JSもしくはJQueryを使って上記の方法を実現するためにはどのようにすればよいでしょうか？

今まで書いたコードは以下の通りです。

sample.html

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
<header class="thm-header">
<nav class="global-nav">
  <ul class="header-nav js-global-nav">
    <li class="item"><a class="link" href=""></a></li>
    <li class="item"><a class="link" href=""></a></li>
    <li class="item"><a class="link" href=""></a></li>
    <li class="item"><a class="link" href=""></a></li>
    <li class="item"><a class="link" href=""></a></li>
    <li class="item"><a class="link" href=""></a></li>
    <li class="item"><a class="link" href=""></a></li>
    <li class="item"><a class="link" href=""></a></li>
    <li class="item"><a class="link" href=""></a></li>
    <li class="item"><a class="link" href=""></a></li>
    <li class="item"><a class="link" href=""></a></li>
    <li class="item"><a class="link" href=""></a></li>
    <li class="item"><a class="link" href=""></a></li>
    <li class="item"><a class="link" href=""></a></li>
    <li class="item"><a class="link" href=""></a></li>
    <li class="item"><a class="link" href=""></a></li>
  </ul>
</nav>
</header>
</body>
</html>

style.css

.global-nav {
  background: none;
  border-top: 2px solid #43b4ab;
  border-bottom: 2px solid #43b4ab;
  padding: 0;
  position: relative;
  margin-top: 6px;
  overflow: hidden;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.global-nav:before,
.global-nav:after {
  position: absolute;
  top: 50%;
  display: block;
  width: 10px;
  height: 10px;
  margin-top: -6px;
  content: '';
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border: solid #000;
  visibility: hidden;
  transition: all .5s ease;
  opacity: 0;
  z-index:100;
}
.global-nav:before {
  left: 7px;
  border-width: 0 0 1px 1px;
}
.global-nav:after {
  right: 7px;
  border-width: 1px 1px 0 0;
}
.header-nav:before,
.header-nav:after {
  position: absolute;
  z-index: 1;
  bottom: 0;
  width: 20px;
  height: 80px;
  content: '';
  visibility: hidden;
  transition: all .5s ease;
  opacity: 0;
}
.header-nav:before {
  left: 0;
}
.header-nav:after {
  right: 0;
}
.thm-header.is-left .global-nav:before,
.thm-header.is-right .global-nav:after,
.thm-header.is-left .header-nav:before,
.thm-header.is-right .header-nav:after {
  visibility: visible;
  opacity: 1;
}

.item {
  border: 1px solid #43b4ab;
  margin: 0;
  height: 40px;
  text-align: center;
  width: calc(100% / 9);
}

.header-nav {
  margin: 0;
  padding: 0;
  background-color: #e6f4f3;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-wrap: wrap;
  overflow: visible;
  white-space: normal;
  width: 150%;
}
.thm-header.is-left .global-nav:before,
.thm-header.is-right .global-nav:after,
.thm-header.is-left .header-nav:before,
.thm-header.is-right .header-nav:after {
  overflow: hidden;
  overflow-x: auto;
  overflow-y: hidden;
 -webkit-overflow-scrolling: touch;
}

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

回答1件

ベストアンサー

初めまして。

こういう考え方はどうでしょうか？？
結論から先にお話しすると、要素の位置状況でclassを付与するというものです。
例えば、以下のように考えることができます。
一番左の要素が見えている　→　element.classList.add('is-right-arrow');
一番左の要素が見えていないかつ　一番右の要素が見えていない　→　element.classList.add('is-left-arrow');
一番左の要素が見えていない　かつ　一番右の要素が見えている　→　element.classList.remove('is-right-arrow');

一番左の要素が見えている　→　左要素位置 > x軸(0)
一番左の要素が見えていない　かつ　一番右の要素が見えていない　→　左要素位置 < x軸(0) && 右要素位置 > 画面幅
一番左の要素が見えていない　かつ　一番右の要素が見えている　→　左要素位置　< x軸(0) && 右要素位置　< 画面幅

プログラムを考えるときは、ただ闇雲にjavascriptをどう実装するか考えるよりはまず文章にすることで自ずと答えが見つかって来ます。
あとは文章にしたものをプログラムに変換するだけなので簡単ですよ。

解決に到らなかったらすいません！！

投稿2018/02/26 23:47

編集2018/02/26 23:48

退会済みユーザー

総合スコア0

Mo_min

2018/02/27 14:02

お返事遅くなってしまい申し訳ありません！！なるほど、要素の位置状況を利用して矢印を表示するためのclass付与、、大変勉強になります。各要素の位置情報の取得方法から勉強が必要だ思ったと共に具体的にどういったプログラムを組めば良いのか理解できました！ありがとうございます一度ShinguYukiさんの考えを元にプログラムを書いてみます！

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