水平滚动内部锚链接点击使用jQuery
问题描述:
使用jQuery移动水平滚动条与mousewheel.It是工作..水平滚动内部锚链接点击使用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>
答
我找到了答案。
$(".prevscroll").click(function (event) {
$('html, body').scrollLeft($('html, body').scrollLeft()+150);
event.preventDefault();
});
答
您应该将mousewheel
功能绑定到body
不html
和-=
不+=
。您需要减少没有增加您scrollLeft
$(function() {
$("body").mousewheel(function(event, delta) {
var $this = $(this);
this.scrollLeft -= (delta) * 50;
event.preventDefault();
});
});
+0
谢谢,mousewheel工作,但锚链接点击不工作(我使用+ =因为我的身体是正确的左) – Niloo 2013-04-06 06:20:35
您可以请您出示您的html代码或小提琴。水平滚动条需要滚动宽度让我检查您的代码 – 2013-04-06 06:11:53
或您正在使用哪个插件向我们展示您的代码小提琴你如何使用此 – 2013-04-06 06:18:30
Plz看到我的编辑.. – Niloo 2013-04-06 06:37:34