回答編集履歴

1 誤字の修正

退会済みユーザー

退会済みユーザー

2018/02/27 08:48  投稿

初めまして。
こういう考え方はどうでしょうか??
結論から先にお話しすると、要素の位置状況でclassを付与するというものです。
例えば、以下のように考えることができます。
一番左の要素が見えている → element.classList.add('is-right-arrow');
一番左の要素が見えていない かつ 一番右の要素が見えていない → element.classList.add('is-left-arrow');
一番左の要素が見えていない かつ 一番右の要素が見えている → element.classList.add('is-right-arrow'); element.classList.remove('is-left-arrow');
一番左の要素が見えていない かつ 一番右の要素が見えている → element.classList.remove('is-right-arrow');
一番左の要素が見えている → 左要素位置 > x軸(0)
一番左の要素が見えていない かつ 一番右の要素が見えていない → 左要素位置 < x軸(0) && 右要素位置 > 画面幅
一番左の要素が見えていない かつ 一番右の要素が見えている → 左要素位置 < x軸(0) && 右要素位置 < 画面幅
プログラムを考えるときは、ただ闇雲にjavascriptをどう実装するか考えるよりはまず文章にすることで自ずと答えが見つかって来ます。
あとは文章にしたものをプログラムに変換するだけなので簡単ですよ。
解決に到らなかったらすいません!!

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る