横向的网页如何实现鼠标滑轮横向移动？

[CS-GO]

横向的网页如何实现鼠标滑轮横向移动？
我做一个学校的点餐网页，想横向的形式，网页已经做出来了，如何实现鼠标滚轮是横向来移动滚动条的？
还有有没可能添加一个按钮，按一下制定滚动条向右移动某些个像素点？我只会静态html网页，求老师帮忙。

[菜牛]

添加按钮那个简单，按钮函数中改变需要滚动的部件位置就是了，用jQuery等库还带滚动特效。 纵向横向这是客户端操作系统的事，配置鼠标属性就是了，如果有的话。

[blackchef]

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

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

//处理mousewheel事件的信息
function scroll (event) {
  var direction = event.wheelDelta;
  //保证滚动到头的时候不再调用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浏览器
} 
})();

改第一行那个stepsize能修改每次滚动的距离

[blackchef]

引用 2 楼 blackchef 的回复:

JavaScript code?123456789101112131415161718192021222324252627282930313233343536(function() { var stepSize = 200, //每滚动一格鼠标，移动多少距离 doc = document.documentElement, body = documen……

有点小问题。我改改

[blackchef]

(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浏览器
} 
})();

css里必须有这样一条：

html, body {
    height: 100%;
}

[云水千寻]

能搜索到很多解决方案，你可以参考下

[LieJia]

引用 4 楼 blackchef 的回复:

(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浏览器
} 
})();

css里必须有这样一条：

html, body {
    height: 100%;
}

请问这段js代码怎么引用啊？楼主和这为大神，求助，谢谢！