jQuery jQuery鼠标滚轮水平滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23952491/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Mousewheel Scroll Horizontally
提问by TooJuniorToCode
I'm currently developing a horizontally website that can enable my mouse scroll to scroll to the left and right...
我目前正在开发一个水平网站，可以让我的鼠标滚动到左右滚动...
My jQuery included sequence:
我的 jQuery 包含序列：
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<!--jquery validation script-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<!--Smooth Scroll-->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
My code as below:
我的代码如下：
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script>
$.noConflict();
$(function() {
$("body").mousewheel(function(event,delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
})
})
$(function() {...});
$(document).ready(function() {
$('#form').validate({...});
$("#submit").click(function()
{...});
})
</script>
My "body" CSS as below:
我的“身体”CSS如下：
html {
width:100%;
overflow-y:hidden;
overflow-x: scroll;
}
body{
}
For right now the code that I doubt is:
现在我怀疑的代码是：
<!--Smooth Scroll-->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
which is crashing with the mouse scroll I think.
我认为这会随着鼠标滚动而崩溃。
The mouse scroll is working, the only problem is the mouse scroll is not smooth, sometimes stop there, sometimes cant even move, is not my mouse problem. I'm not sure what's cause this because I tried to debug it for 2 days already. Anyone here to share their thoughts on this issue?
鼠标滚动正常，唯一的问题是鼠标滚动不流畅，有时停在那里，有时甚至不能移动，不是我的鼠标问题。我不确定这是什么原因，因为我已经尝试调试了 2 天。有人在这里分享他们对这个问题的看法吗？
I been finding solution but it looked weird on my case. Scroll until a certain part and is jam at the middle. (Just the scrolling bar.) I'm using Chrome on Mac for testing. Btw is there any solution like AutoShift while scrolling because that's worked for me when I pressed Shift button.
我一直在寻找解决方案，但在我的情况下看起来很奇怪。滚动到某个部分并在中间卡住。（只是滚动条。）我在 Mac 上使用 Chrome 进行测试。顺便说一句，滚动时有没有像 AutoShift 这样的解决方案，因为当我按下 Shift 按钮时这对我有用。
回答by TooJuniorToCode
After 3 days of searching for the answer, I finally found a solutionwithout the Jquery plugins!
经过3天的寻找答案，我终于找到了没有Jquery插件的解决方案！
// http://www.dte.web.id/2013/02/event-mouse-wheel.html
(function() {
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
document.documentElement.scrollLeft -= (delta*40); // Multiplied by 40
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);
}
})();
If this code still won't work, the problem is not here, it's in your CSS.
如果这段代码仍然不起作用，问题不在这里，而是在你的 CSS 中。
回答by Erick A. Monta?ez
This is a JQuery version of @TooJuniorToCode's answer.
It's shorter and ideal if you're already using jQuery. Hope it's useful for someone.
这是@TooJuniorToCode's answer的 JQuery 版本。如果您已经在使用 jQuery，它会更短也更理想。希望它对某人有用。
$('body').on('mousewheel DOMMouseScroll', function(event){
var delta = Math.max(-1, Math.min(1, (event.originalEvent.wheelDelta || -event.originalEvent.detail)));
$(this).scrollLeft( $(this).scrollLeft() - ( delta * 40 ) );
event.preventDefault();
});
回答by Systematix Infotech
To scroll website horizontally please follow below code:
要水平滚动网站，请遵循以下代码：
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
Attached mouse wheel event to body:
将鼠标滚轮事件附加到正文：
$(function() {
$("body").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
See demo:
见演示：
http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/
http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/
回答by Stanescu Gheorghe
$("html, body").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
Chrome has the scroll on the body, Firefox has the scroll on the html
Chrome 在 body 上有滚动，Firefox 在 html 上有滚动
