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

スマホでメニューなどを横スクロールする動作が一般的になり、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;
}