html實現鼠標點擊水平拖動元素

1. 首先需要兩個包裹的元素

2.外層元素肯定比內層寬度小；

3.然后對外層元素使用overflow-y:hidden;

4.其次不可以讓里面的元素換行（假如使用了flex布局的話，那就設置flex-wrap：nowarp）；

5.以上在移動端直接水平可以拖動，在PC端還需要加上js；如下；

  let el = document.getElementsByClassName('header-index')[0];
  // el.style.cursor = 'grab';
  // console.log(el);
  el.onmousedown = function() {
    el.style.cursor = 'grabbing';
    let gapX = event.clientX;
    let startX = el.scrollLeft;
    document.onmousemove = function(e) {
      let x = e.clientX - gapX;
      el.scrollLeft = startX - x;
      return false;
    };
    document.onmouseup = function() {
      el.style.cursor = 'grab'
      document.onmousemove = null;
      document.onmouseup = null;
    };
  };