I have a template that when user use mouse wheel the template scroll horizontally .
but it just work in chrome .
is there any way to scroll horizontally in firefox and IE ?
here is a demo : http://jsfiddle.net/VhERd/
and jquery :
<script>
$(function() {
$("body").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
</script>
<script src="http://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js"></script>
and at the end sry for my english ;)
它需要处理html
元素,而不是Firefox的body
元素。
$("body, html").mousewheel....
I've used this function, it's a bit hacky, but does the job.
function scrollPage (e) {
var delta = e.deltaX || e.wheelDelta,
dir = (delta > 0) ? -90 : 90;
if (window.addEventListener && !(window.chrome || window.opera)) {
dir *= -1;
}
window.scrollBy(dir, 0);
e.returnValue = false;
if (e.preventDefault) {
e.preventDefault();
}
return false;
}
And attach the event:
if (window.addEventListener && (!window.chrome && !window.opera)) {
window.addEventListener('wheel', scrollPage, false); // IE9+, FF
} else if (window.chrome || window.opera) {
window.addEventListener('mousewheel', scrollPage, false); // Chrome & Opera
} else {
document.attachEvent('onmousewheel', scrollPage); // IE8-
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.