鼠标横向滚动,鼠标移动出现横竖线条

(function() {
var stepSize = 200, //每滚动一格鼠标，移动多少距离
    doc = document.documentElement,
    body = document.body,
    docWidth = doc.clientWidth,
    scrollLeft = -1,
    ready = false;


//添加鼠标滚轮事件
if (document.addEventListener) {
  document.addEventListener('mousewheel', scroll, false);
  document.addEventListener('DOMMouseScroll', scroll, false); //针对firefox
} else {
  document.attachEvent('onmousewheel',scroll) //针对老ie浏览器
}


//处理mousewheel事件的信息
function scroll (event) {
  //第一次滚动需要获取当前滚动位置
  if (!ready) {
    scrollLeft = doc.scrollLeft + body.scrollLeft;
    ready = true;
  }
  //firefox用detail反映滚动方向，而且方向和其他浏览器相反。其他浏览器用wheelDelta
  var direction = event.wheelDelta || -event.detail; 
  //保证滚动到头的时候不再调用update函数
  if (scrollLeft <= 0 && direction > 0) {
    return;
  }
  if (scrollLeft >= docWidth && direction < 0) {
    return;
  }
  //根据鼠标滚动的方向确定是往左还是往右移动
  var distance = direction > 0? -stepSize : stepSize;
  update(distance);
}


//滚动
function update (distance) {
  scrollLeft += distance;
  doc.scrollLeft = scrollLeft;
  body.scrollLeft = scrollLeft; //针对webkit浏览器
} 

})();

html, body {
    height: 100%;
}

方法2 

html {overflow-y: hidden;}

<div style="width: 5000px;">test</div>