首先声明一下，是实现了效果，本质上并不是水平移动滑动条。
思路：
写两个div：
外层div是框架，比内层div小，设置溢出隐藏
内层div是内容，
然后通过滑轮事件，调控内层div的位置，实现水平移动。
实现：
html代码
<div id="div1">
<div id="div2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</div>
</div>
再通过css3设置样式：
*{
margin: 0 auto;
}
#div1{
position: fixed;
width: 100%;
height: 100%;
background: red;
overflow: hidden;
}
#div2{
position: relative;
width: 15360px;
height: 98%;
background: blue;
}
li{
width: 1000px;
height: 94%;
background: yellow;
margin-left: 50px;
float: left;
}
这时候效果如图，但是页面并不会滚动：
接下来写JS就没有那么顺利了，先分析一波：
- DOM事件冒泡，我们可以从window或者document中获取所有事件，JS有滑轮事件，我们可以监听并处理滑轮事件
- JS可以设置事件处理的程序或函数
- 当滑轮滑动，触发事件，调用处理程序，处理程序调整内容div位置
- 闭包可以帮助我们保存函数执行内存
首先我们需要整一个函数从事件冒泡中捕获到滑轮事件，然后指定处理事件的函数，再编写处理函数，让内层div动起来：
/*
目标：实现滑动滑轮，页面水平移动。
操作：指定滑轮事件处理程序、编写处理程序。
1. 指定滑轮事件处理的程序的函数
1.1 windowAddMouseWheel()函数去指定滑轮事件的处理函数是 scrollFunc();
2. 编写函数scrollFunc()的处理过程
2.1 函数需要接受冒泡上来的事件 ⇉ 判断滑轮是上或下运动 ⇉ 记录滑轮滚动次数 ⇉ 计算页面向左|右滑动距离 ⇉ DOM操作改变div的style
*/
var index = 0;
windowAddMouseWheel();
function windowAddMouseWheel() {
//处理滑轮事件的函数
var scrollFunc = function (e) {
var aaa = document.getElementById('div2');
if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta > 0) { //当滑轮向上滚动时
console.log("滑轮向下滚动");
index+=120;
aaa.style.left = index+"px";
}
if (e.wheelDelta < 0) { //当滑轮向下滚动时
console.log("滑轮向上滚动");
index-=120;
aaa.style.left = index+"px";
}
} else if (e.detail) { //Firefox滑轮事件
if (e.detail > 0) { //当滑轮向上滚动时
console.log("滑轮向下滚动");
index+=120;
aaa.style.left = index+"px";
}
if (e.detail < 0) { //当滑轮向下滚动时
console.log("滑轮向上滚动");
index-=120;
aaa.style.left = index+"px";
}
}
};
//给页面滑轮滚动事件指定处理者
if (document.addEventListener) { //火狐使用DOMMouseScroll
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
/*
DOM0级事件处理程序，《JavaScriot高级程序设计》（第三版）书P350
*/
//window.onmousewheel可以从window对象获取事件，document.onmousewheel可以从document对象获取事件，用哪一个都可以。然后“= scrollFunc”是指定处理事件的函数名称。
// window.onmousewheel = scrollFunc;
document.onmousewheel = scrollFunc;
}
效果图演示：
完整代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0 auto;
}
#div1{
position: fixed;
width: 100%;
height: 100%;
background: red;
overflow: hidden;
}
#div2{
position: relative;
width: 15360px;
height: 98%;
background: blue;
}
li{
width: 1000px;
height: 94%;
background: yellow;
margin-left: 50px;
float: left;
}
</style>
<script>
/*
目标：实现滑动滑轮，页面水平移动。
操作：指定滑轮事件处理程序、编写处理程序。
1. 指定滑轮事件处理的程序的函数
1.1 windowAddMouseWheel()函数去指定滑轮事件的处理函数是 scrollFunc();
2. 编写函数scrollFunc()的处理过程
2.1 函数需要接受冒泡上来的事件 ⇉ 判断滑轮是上或下运动 ⇉ 记录滑轮滚动次数 ⇉ 计算页面向左|右滑动距离 ⇉ DOM操作改变div的style
*/
var index = 0;
windowAddMouseWheel();
function windowAddMouseWheel() {
var scrollFunc = function (e) {
// e = e || window.event;
// alert(e.wheelDelta);
var aaa = document.getElementById('div2');
if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta > 0) { //当滑轮向上滚动时
console.log("滑轮向下滚动");
index+=120;
aaa.style.left = index+"px";
}
if (e.wheelDelta < 0) { //当滑轮向下滚动时
console.log("滑轮向上滚动");
index-=120;
aaa.style.left = index+"px";
}
} else if (e.detail) { //Firefox滑轮事件
if (e.detail > 0) { //当滑轮向上滚动时
console.log("滑轮向下滚动");
index+=120;
aaa.style.left = index+"px";
}
if (e.detail < 0) { //当滑轮向下滚动时
console.log("滑轮向上滚动");
index-=120;
aaa.style.left = index+"px";
}
}
};
//给页面滑轮滚动事件指定处理者
if (document.addEventListener) { //火狐使用DOMMouseScroll
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
/*
DOM0级事件处理程序，《JavaScriot高级程序设计》（第三版）书P350
*/
//window.onmousewheel可以从window对象获取事件，document.onmousewheel可以从document对象获取事件，用哪一个都可以。然后“= scrollFunc”是指定处理事件的函数名称。
// window.onmousewheel = scrollFunc;
document.onmousewheel = scrollFunc;
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</div>
</div>
</body>
</html>
作为一个JS的初学者，写的博客可能有很多问题，欢迎大佬纠正！
