Как сделать горизонтальный скролл без скроллбара?

Question

[Kalerss]

Доброго времени суток, необходимо сделать так, чтобы пункты меню имели горизонтальный невидимый скролл, перетаскивались мышью, без jquery.

html:

<div class="carousel">
            <div class="menu" >
             <div class="menu-list hide-s hide-m"><button tabindex="7" aria-label="See all brands" type="button">Ремонтируемые бренды</button></div>
             <div class="menu-list"><button tabindex="8" type="button" aria-label="See all devices" value="focus">Ремонтируемые устройства</button></div>
             <div class="menu-list hide-l"><button tabindex="9" aria-label="View additional services" type="button">Дополнительные услуги</button></div>
             <div class="menu-list"><button tabindex="10" aria-label="See prices fr services" type="button">Цены на услуги</button></div>
             <div class="menu-list"><button tabindex="11" aria-label="View addresses of service centers" type="button">Адреса сервисных центров</button></div>
             <div class="menu-list hide-s"><button tabindex="12" aria-label="See srecial prices" type="button">Специальные цены</button></div>
             <div class="menu-list hide-s"><button tabindex="13" aria-label="See reviews" type="button">Отзывы</button></div>
            </div>
          </div>

Comments

[imko]

Чтобы спрятать скроллбар достаточно сделать обёртку с overflow hidden и отрицательный нижний марджин для прокручивающегося блока. А про мышку не скажу)

[Kalerss]

imko, вообще, есть вот такой вариант, проверял, работает, но он на jquery

$(function(){
  var curDown = false,
      curYPos = 0,
      curXPos = 0;
  $(".block").mousemove(function(m){
    if(curDown === true){
     $(".block").scrollTop($(".block").scrollTop() + (curYPos - m.pageY)); 
     $(".block").scrollLeft($(".block").scrollLeft() + (curXPos - m.pageX));
    }
  });
  
  $(".block_width_item").mousedown(function(m){
    curDown = true;
    curYPos = m.pageY;
    curXPos = m.pageX;
  });
  
  $(".block_width_item").mouseup(function(){
    curDown = false;
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

[imko]

Kalerss, ну перепиши на чистом, тут от jquery то ниче нету по сути)

[Kalerss]

imko, переписал

document.querySelector(function(){
  var curDown = false,
      curYPos = 0,
      curXPos = 0;
  document.querySelector(".carousel").mousemove(function(m){
    if(curDown === true){
     document.querySelector(".carousel").scrollTop(document.querySelector(".block").scrollTop + (curYPos - m.pageY)); 
     document.querySelector(".carousel").scrollLeft(document.querySelector(".block").scrollLeft() + (curXPos - m.pageX));
    }
  });
  
  document.querySelector(".menu-list").mousedown(function(m){
    curDown = true;
    curYPos = m.pageY;
    curXPos = m.pageX;
  });
  
  document.querySelector(".menu-list").mouseup(function(){
    curDown = false;
  });
})

не работает, не могу понять в чем ошибка

[imko]

Kalerss, в том что написано не работать) формулируй конкретнее