基于此:http://reader-download.googlecode.com/svn/trunk/full-page-horizontal-scrolling.html我终其一生都无法让它在 IE 10 中以标准或 Quirks 模式工作。我这里有一个 jsFiddle,但它只能垂直滚动:http://jsfiddle.net/dwsRC/1/
滚动代码与示例站点 100% 相同。我尝试了其他滚动示例,但 preventDefault 不起作用。添加 jQuery 也无济于事。
在 Visual Studio 2012 中我得到:
JavaScript runtime error: Object doesn't support property or method 'preventDefault'
HTML:
<div id="container">
<div class="content c1">Hello, World!</div>
<div class="content c2">Hello, World!</div>
<div class="content c3">Hello, World!</div>
<div class="content c1">Hello, World!</div>
<div class="content c2">Hello, World!</div>
<div class="content c3 last">Hello, World!</div>
</div>
CSS:
#container {
height: 100%;
width: 6000px;
overflow: hidden;
}
.content {
width: 895px;
height: 675px;
float:left;
margin-right:50px;
}
.c1 {
background-color: red;
}
.c2 {
background-color: blue;
}
.c3 {
background-color: green;
}
JS:
(function () {
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
document.body.scrollLeft -= (delta * 40); // Multiplied by 40
e.preventDefault();
}
if (window.addEventListener) {
// IE9, Chrome, Safari, Opera
window.addEventListener("mousewheel", scrollHorizontally, false);
// Firefox
window.addEventListener("DOMMouseScroll", scrollHorizontally, false);
} else {
// IE 6/7/8
window.attachEvent("onmousewheel", scrollHorizontally);
}
})();
最佳答案
This answer为我解决了这个问题,摆脱了 IE 错误并且水平滚动有效。
关于JavaScript:使用鼠标滚轮水平滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16954817/