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