Question

我用jquery用鼠标滚轮进行水平滚动。这是工作..

 $('html').mousewheel(function (event, delta) {
            this.scrollLeft += (delta * 50);
            event.preventDefault();
        });

我想要水平滚动内部锚链接点击，

我使用此代码：

   $(".prevscroll").click(function (event) {
               event.preventDefault();
               $.scrollTo(this.hash, 150, { easing: 'elasout' });
        });

或

  $(window).scrollLeft((Number($(window).scrollLeft()) + 50) + 'px');

或

 $('body').scrollLeft(50);

但不要滚动!!!!

我的HTML代码

<script type='text/javascript' src="js/jquery.mousewheel.min.js"></script>
<script type='text/javascript' src="js/jquery.min.js"></script>
<script type='text/javascript' src="js/jquery.mousewheel.js"></script>
<style>
 .content
 {
padding: 20px 20px 0;
display: block;
z-index: 1;
height: 340px;
position: relative;
}
#contentWrapper
{
position: absolute;
max-width: 100%;
min-width: 400px;
min-height: 350px;
padding: 0 20px 30px 20px;
z-index: 1;
} 
</style>


<div style="display: block;top:107px" id="contentWrapper">
  <a class="prevscroll"></a>
   <div style="margin-right: 0px;" id="content">
    //My content
   </div>
</div>

Answer 1

您应该将mousewheel功能绑定到body而不是html，-=不是+=。您需要降低而不是增加 scrollLeft的价值

$(function() {

    $("body").mousewheel(function(event, delta) {
        var $this = $(this);

        this.scrollLeft -= (delta) * 50;
        event.preventDefault();
    });
});

演示：http://jsfiddle.net/EBPdr/1/

Answer 2

我找到了答案。

$(".prevscroll").click(function (event) {
            $('html, body').scrollLeft($('html, body').scrollLeft()+150);
              event.preventDefault();
        });

水平滚动内部锚点链接单击jquery

2 个答案: