Jqueryを使ってボックス要素をボタンを押している間少しづつ横スクロールしたい。

Question

いつもご教授頂きましてありがとうございます。

タイトルの通り実装出来なくて少し困っております。
いくつか試してはみたのですが思った通りの動作が実現できませんでした。
今回は調べていてかなり的外れだったので余計なJSを記載を省略いたします。

CSSに関しては下記です。

#main_box {
    height: 560px;
    width: 560px;
    overflow: hidden;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

#main_box_in {
    width: 1500px;
    height: 560px;
}

HTML記述に関しては下記です。

<div id="main_box">
　<div id="main_box_in">
    
    このコンテンツが横スクロールします。　

  </div>
</div>

<div id="prev">タップしている間少しづつ左へスクロール</div>
<div id="next">タップしている間少しづつ右へスクロール</div>

何卒お力を貸して頂けましたら嬉しい限りです。
よろしくお願い致します。

Comments

[yambejp]

横スクロール自体はどう実装しているのでしょうか？無限にループでなければ限界まできたらとまるのでしょうか？

[extliger]

いつもありがとうございます。無限ループではありません！限界まで来たらスクロールがストップします。中には横読み用のコンテンツを導入予定なのですがユーザビリティも考慮しボタンが欲しいとの事で実装を模索しておりました。

[yambejp]

.scrollLeft(n)で移動してみてはどうでしょう？

[extliger]

簡単に右へスクロールする場合（押している間などは省きまして）nextをクリックしている間$("#main_box_in").animate({scrollLeft:1500});としたのですが動作しません。そこまで単純な話ではないのでしょうか...

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[extliger]

かしこまりました。ご意見頂戴したワードを元に再度調査し、不足部分を追記させて頂きます。

Answer 1

一応サンプルつけておきます。
スピードについては、タイマーの刻み値やオフセット値を調整して下さい。

div#main_box_in {
width: 200px;
overflow: auto;
border: 1px solid black;
}

$(function(){
  var str="";
  for(var i=1;i<=100;i++){ str+=(i%10).toString();} 
  $('#main_box_in').append($('<div>').text(str)); /*テストデータ投入*/
  var w=$('#main_box_in').prop('scrollWidth')-$('#main_box_in').prop('clientWidth');
  var timerID;
  var offset=10;
  var ms=100;
  $('#prev,#next').on({
    'mousedown':function(){
      var myId=$(this).attr('id');
      timerID=setInterval(function(){
        var pos=$('#main_box_in').scrollLeft()+(myId=='prev'?-1:1)*offset;/*調整*/
        if(pos<0) pos=0;
        if(pos>w) pos=w;
        console.log(pos);/*debug用*/
        $('#main_box_in').scrollLeft(pos);
      },ms);
    },
    'mouseup':function(){
      clearInterval(timerID);
    }
  });
});

※offset指定が間違っていたので修正しました

<div id="main_box_in"></div>
<div id="prev">タップしている間少しづつ左へスクロール</div>
<div id="next">タップしている間少しづつ右へスクロール</div>

Comments

[extliger]

無茶苦茶な要望にご回答頂きまして本当にありがとうございます。
完璧に思っていた動作になりました。
もっと技術向上に向けて努力いたします。

Answer 2

http://alphasis.info/2014/02/javascript-sample-animation-onmousedown-onmouseup-countupdown/

こちらが参考になるかと思います。