.js_scroll{  
  overflow-x: scroll;
  cursor: pointer;
}

.js_scroll::-webkit-scrollbar{
  display: none;
}

//jQuery不使用
// スクロールドラッグ
function mousedragscrollable(element){
  let target;
  const elms = document.querySelectorAll(element);
  for(let i=0; i<elms.length; i++){
    elms[i].addEventListener('mousedown', function(evt){
      evt.preventDefault();
      target = elms[i];
      target.dataset.down = 'true';
      target.dataset.move = 'false';
      target.dataset.x = evt.clientX;
      target.dataset.y = evt.clientY;
      target.dataset.scrollleft = target.scrollLeft;
      target.dataset.scrolltop = target.scrollTop;
      evt.stopPropagation();
    });
    elms[i].addEventListener('click', function(evt){
      if(elms[i].detaset != null && elms[i].detaset.move == 'true') evt.stopPropagation();
    });
  }
  document.addEventListener('mousemove', function(evt){
    if(target != null && target.dataset.down == 'true'){
      evt.preventDefault();
      let move_x = parseInt(target.dataset.x) - evt.clientX;
      let move_y = parseInt(target.dataset.y) - evt.clientY;
      if (move_x !== 0 || move_y !== 0) {
        target.dataset.move = 'true';
      } else {
        return;
      }
      target.scrollLeft = parseInt(target.dataset.scrollleft) + move_x;
      target.scrollTop = parseInt(target.dataset.scrolltop) + move_y;
      evt.stopPropagation();
    }
  });
  document.addEventListener('mouseup', function(evt){
    if(target != null && target.dataset.down == 'true'){
      target.dataset.down = 'false';
      evt.stopPropagation();
    }
  });
}
    
window.addEventListener('DOMContentLoaded', function(){
  mousedragscrollable('.js_scroll');
});

//jQuery
$(function() {
  // スクロールドラッグ
  function mousedragscrollable(element) {
    let $target;

    $(document).on('mousedown', element, function(evt) {
      evt.preventDefault();
      $target = $(this);
      $target.data({
        down: 'true',
        move: 'false',
        x: evt.clientX,
        scrollleft: $target.scrollLeft()
      });
      evt.stopPropagation();
    });

    $(document).on('mousemove', function(evt) {
      if ($target && $target.data('down') === 'true') {
        evt.preventDefault();
        let move_x = $target.data('x') - evt.clientX;

        if (move_x !== 0) {
          $target.data('move', 'true');
        } else {
          return;
        }

        $target.scrollLeft($target.data('scrollleft') + move_x);
        evt.stopPropagation();
      }
    });

    $(document).on('mouseup', function(evt) {
      if ($target && $target.data('down') === 'true') {
        $target.data('down', 'false');
        evt.stopPropagation();
        $target = null; // Reset target after mouse up
      }
    });
  }

  // 初期化
  mousedragscrollable('.js_scroll');
});

//jQuery不使用
function mousedragscrollable(element){
  let target;
  const elms = document.querySelectorAll(element);
  for(let i=0; i<elms.length; i++){
    elms[i].addEventListener('mousedown', function(evt){
      evt.preventDefault();
      target = elms[i];
      target.dataset.down = 'true';
      target.dataset.move = 'false';
      target.dataset.x = evt.clientX;
      target.dataset.y = evt.clientY;
      target.dataset.scrollleft = target.scrollLeft;
      target.dataset.scrolltop = target.scrollTop;
      evt.stopPropagation();
    });
    elms[i].addEventListener('click', function(evt){
      if(elms[i].dataset != null && elms[i].dataset.move == 'true') evt.stopPropagation();
    });
  }
  document.addEventListener('mousemove', function(evt){
    if(target != null && target.dataset.down == 'true'){
      evt.preventDefault();
      let move_x = parseInt(target.dataset.x) - evt.clientX;
      let move_y = parseInt(target.dataset.y) - evt.clientY;
      if (move_x !== 0 || move_y !== 0) {
        target.dataset.move = 'true';
      } else {
        return;
      }
      target.scrollLeft = parseInt(target.dataset.scrollleft) + move_x;
      target.scrollTop = parseInt(target.dataset.scrolltop) + move_y;
      evt.stopPropagation();
    }
  });
  document.addEventListener('mouseup', function(evt){
    if(target != null && target.dataset.down == 'true'){
      target.dataset.down = 'false';
      evt.stopPropagation();
    }
  });
}
    
window.addEventListener('DOMContentLoaded', function(){
  mousedragscrollable('.js_scroll');
});

//jQuery
$(function() {
  function mousedragscrollable(element) {
    let $target;

    // mousedown イベントリスナー
    $(document).on('mousedown', element, function(evt) {
      evt.preventDefault();
      $target = $(this);
      $target.data({
        down: 'true',
        move: 'false',
        x: evt.clientX,
        y: evt.clientY,
        scrollleft: $target.scrollLeft(),
        scrolltop: $target.scrollTop()
      });
      evt.stopPropagation();
    });

    // click イベントリスナー
    $(document).on('click', element, function(evt) {
      if ($target && $target.data('move') === 'true') {
        evt.stopPropagation();
      }
    });

    // mousemove イベントリスナー
    $(document).on('mousemove', function(evt) {
      if ($target && $target.data('down') === 'true') {
        evt.preventDefault();
        let move_x = $target.data('x') - evt.clientX;
        let move_y = $target.data('y') - evt.clientY;

        if (move_x !== 0 || move_y !== 0) {
          $target.data('move', 'true');
        } else {
          return;
        }

        $target.scrollLeft($target.data('scrollleft') + move_x);
        $target.scrollTop($target.data('scrolltop') + move_y);
        evt.stopPropagation();
      }
    });

    // mouseup イベントリスナー
    $(document).on('mouseup', function(evt) {
      if ($target && $target.data('down') === 'true') {
        $target.data('down', 'false');
        evt.stopPropagation();
        $target = null; // Reset target after mouse up
      }
    });
  }

  // 初期化
  mousedragscrollable('.js_scroll');
});