jQuery Mousouheel水平滚动 [英] jQuery Mousewheel Scroll Horizontally

问题描述

我目前正在开发一个水平网站，可以启用我的鼠标滚动向左和向右滚动...

我的jQuery包含的序列：

 < script type =text / javascriptsrc =js / jquery.js>< / script& 
< script type =text / javascriptsrc =js / jquery-1.11.1.js>< / script> 
 
<！ -  jquery validation script  - > 
< script type =text / javascriptsrc =http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js>< /脚本> 
 
<！ - 平滑滚动 - > 
< script type =text / javascriptsrc =js / jquery.easing.1.3.js>< / script> 
  

我的代码如下：

 < script type =text / javascriptsrc =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> 
  

我的正文CSS如下：

  html {
 width：100％; 
 overflow-y：hidden; 
 overflow-x：scroll; 
} 
 body {
 
} 
  

现在我怀疑的代码是：

 <！ -  Smooth Scroll  - > 
< script type =text / javascriptsrc =js / jquery.easing.1.3.js>< / script> 
  

这是用鼠标滚动我想的。

鼠标滚动是工作，唯一的问题是鼠标滚动不顺利，有时停止，有时甚至移动，是不是我的鼠标问题。我不知道是什么原因，因为我试图调试它已经2天了。这里的任何人都在分享他们对这个问题的想法？

我找到解决方案，但它看起来很怪我的情况。滚动直到某个部分，并在中间卡住。 （只是滚动条。）我在Mac上使用Chrome进行测试。

解决方案

经过3天的搜索后，Btw就有了解决方案对于答案，我终于找到了一个解决方案，没有Jquery插件！

  // http://www.dte.web.id/2013/02/event-mouse- wheel.html 
（function（）{
 function scrollHorizo​​ntally（e）{
e = window.event || e; 
 var delta = Math.max min（1，（e.wheelDelta || -e.detail）））; 
 document.documentElement.scrollLeft  -  =（delta * 40）; //乘以40 
 document.body.scrollLeft  - =（delta * 40）; //乘以40 
 e.preventDefault（）; 
} 
 if（window.addEventListener）{
 // IE9，Chrome， Opera 
 window.addEventListener（mousewheel，scrollHorizo​​ntally，false）; 
 // Firefox 
 window.addEventListener（DOMMouseScroll，scrollHorizo​​ntally，false）; 
} else {
 // IE 6/7/8 
 window.attachEvent（onmousewheel，scrollHorizo​​ntally）; 
} 
}）（）; 
  

如果此代码仍然无法工作，问题不在这里，它在你的CSS。 / p>

I'm currently developing a horizontally website that can enable my mouse scroll to scroll to the left and right...

My jQuery included sequence:

<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:

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?

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.

解决方案

After 3 days of searching for the answer, I finally found a solution without the Jquery plugins!

// 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.

这篇关于jQuery Mousouheel水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！