【jQuery】マウスのドラッグで横スクロールさせる方法

この記事は約3分で読めます。
広告

スマホでメニューなどを横スクロールする動作が一般的になり、PCでもそのままの動作させたい時
macだと「overflow:scroll」だけで、マウスでフリックするとそれっぽくなるけど
windowsだとメニューバーを押して移動して~ってやんなきゃいけない。
これじゃダメだからマウスのドラッグで横スクロールできるようにしよう!

DEMO
jQuery
$.prototype.draggable = function() {
  var t;
  $(this).each(function(i,e) {
    $(e).mousedown(function(e2) {
      e2.preventDefault();
      t = $(e);
      $(e).data({
        down: true,
        x: e2.clientX,
        y: e2.clientY,
        left: $(e).scrollLeft(),
        top: $(e).scrollTop()
      });
    });
  });
  $(document).mousemove(function(e) {
    if($(t).data("down")) {
      e.preventDefault();
      $(t).scrollLeft($(t).data("x")+$(t).data("left")-e.clientX);
      $(t).scrollTop($(t).data("y")+$(t).data("top")-e.clientY);
    }
  }).mouseup(function(e) {
    $(t).data("down", false);
  });
};
$(".yoko-scroll").draggable();

このDEMOのHTMLとCSSもはっておくから、そのままコピペで実装してみてね!

HTML
<div class="yoko-scroll">
 <ul>
  <li>今</li>
  <li>日</li>
  <li>は</li>
  <li>天</li>
  <li>気</li>
  <li>だ</li>
  <li>な</li>
  <li>ぁ</li>
  <li>。</li>
 </ul>
</div>
CSS
.yoko-scroll {
  width: 100%;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.yoko-scroll::-webkit-scrollbar {
  display: none;
}
.yoko-scroll ul {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 3620px;
  cursor: grab;
}
.yoko-scroll ul:active {
  cursor: grabbing;
}
.yoko-scroll li {
  width: 400px;
  padding: 60px 0;
  font-size: 150px;
  text-align: center;
  color: #ffffff;
  background: #1de6c7;
  border-right: 2px solid #ffffff;
}
SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQuery

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
広告
初めてのブログ

コメント

タイトルとURLをコピーしました