jQueryで横スクロールボタンの実装

横スクロールボタン作ります

なんで作るかと言うと、最近のスマホはスクロールバーがデフォルトで表示されなかったりするんですよね。
頑張ってCSSで実装してchromeの検証ツールではしっかり表示されているのに・・・・実機では
なのであった方がユーザー的には親切かなと。

こんな感じで投稿記事をforeachで展開しているとします。
矢印はFont Awesomeから

hoge.php

<section id="mypage" class="js-wrapper">
　　//左スクロールボタン
    <span class="c-btn__arrow p-mypage__scrollPrev js-prev">
      <i class="fa-solid fa-angles-left fa-2x"></i>
    </span>

   //投稿記事を展開しているとする
    <section class="p-mypage js-scroll-content">
      @foreach($posts as $post)
      <div class="c-card">
       <h3 class="c-card__title">{{$post->title}}</h3>
       <div class="c-card__body">
        {{$post->content}}
       </div>
      </div>
      @endforeach
    </section>

　　//右スクロールボタン
    <span class="c-btn__arrow p-mypage__scrollNext js-next">
      <i class="fa-solid fa-angles-right fa-2x"></i>
    </span>
 </section>

app.js

 $(function () {
    
    $('.js-next').on('click', function () {
      
   　//親要素を取得してその子要素のスクロールさせたい要素を取得
      var target = $(this).parent('.js-wrapper').find('.js-scroll-content');
      var width = target.width();
      
      target.animate({
        //右にスクロール
        scrollLeft: target.scrollLeft() + width
      }, 300);
      return false;
    });
  });
  
  $('.js-prev').on('click', function () {
    
    var target = $(this).parent('.js-wrapper').find('.js-scroll-content');
    var width = target.width();
    

    target.animate({
      //左スクロール
      scrollLeft: target.scrollLeft() - width
    }, 300);
    return false;
  });

以上です。
スクロール量とスピードはお好みで。
あとはスクロール量を取得して、どちらかの端っこまで行ったら矢印消す。みたいな処理だともっと親切ですね。