是否可以判断滚动事件是由浏览器还是由用户完成的？具体地,当使用后退按钮时,浏览器可以跳转到最后已知的滚动位置.如果我绑定滚动事件,我如何判断这是由用户还是浏览器引起的？
$(document).scroll( function(){
//who did this?!
});
我看到三种导致浏览器滚动的情况.
element.scrollTo(x,y).我想这样做,以便网页自动滚动到某个元素,但我不希望滚动对抗用户输入 - 如果它开始滚动然后用户滚动,我希望自动滚动停止并让用户完全控制.
所以我原本以为我可以这样做:
var animatable = $('body, html');
animatable.animate({scrollTop: $('#foo').offset()}, 1000);
$(window).scroll(function() { animatable.stop(); });
然而,问题是 - scrollTop的动画触发了窗口的滚动事件处理程序!因此,动画开始然后立即停止.
我正在寻找一种方法,我可以使我的窗口滚动事件处理程序只有在用户输入触发时停止...这可能吗？
我想重新创建在这个网站上使用的效果:http://www.brizk.com/
该网站使用一个向下滚动的大页面.当您向下滚动并传递不同的部分时,左侧的菜单导航将css类更改为"当前",因为相应的div进入视图.
我认为这可以通过jQuery使用$(window).height();
我是jQuery的新手,我想写的是这样的(用非专业术语来说):
...并重复4个不同的内容div.
任何人都可以指出我正确的方向..？谢谢.
我正在使用http://nick-jonas.github.io/windows/的修订版本,它允许用户在DIV中滚动不同的部分,然后将其重新捕捉到位.
因为我正在滚动DIV我已经替换了:
$('.windows').animate({scrollTop: scrollTo }, options.snapSpeed, function(){
if(!completeCalled){
if(t){clearTimeout(t);}
t = null;
completeCalled = true;
options.onSnapComplete($visibleWindow);
}
});
有:
$('.windows').scrollTo( $visibleWindow , options.snapSpeed, { onAfter:function(){
if(!completeCalled){
if(t){clearTimeout(t);}
t = null;
completeCalled = true;
options.onSnapComplete($visibleWindow);
}
}});
因此,您可以看到我使用scrollTo插件跳转到可见的div而不是像前面的代码那样依赖复杂的偏移量.
我在原始代码和我自己的代码中注意到的一个错误是,如果捕捉已经开始,然后用户通过滚动来中断此操作,他们将最终与滚动事件进行战斗以滚动内容.因此,如果scrollTo向下滚动100个像素,然后他们尝试使用浏览器滚动条向上滚动300个像素,则屏幕将在事件和浏览器滚动战斗时出现问题.
关于如何阻止这一点的任何想法？我希望现在我正在使用scrollTo插件,它将变得更容易处理.
到目前为止,我尝试过:
$('.windows').bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
$(this).stop().unbind('scroll mousedown DOMMouseScroll mousewheel keyup');
}
});
但是这样可以阻止所有的攻击......任何修复的想法？
我想使用锚标签在网页上的div内滚动.但是,当我单击锚标记时,整个页面会跳转到div中的锚标记.
div中的内容应该滚动,而不会自动滚动网页的主体.
我一直在谷歌搜索并试图解决这个问题几周,还没有找到一个可接受的解决方案.这似乎也是一个非常常见的问题.
我对javascript知之甚少,但从我收集到的内容中,似乎有两种可能的方法来实现这一点:
1.使页面主体只能通过鼠标滚轮/手动而不是锚标签滚动.这仅适用于身体而不适用于其他因素.
-要么-
2.滚动到div中的锚标记,并在它影响正文之前取消该过程.
如果它没有将锚标记添加到网址,则会获得奖励.
这里有一些类似问题的额外链接,可能有一些你可以使用的想法:看起来很有希望,无法让它工作 在div中滚动而不移动页面
使用event.preventDetfault()或event.returnValue = false可以在锚链接滚动到右边后用于正文 http://js-unit-testing.com/2013/08/08/preventing-anchor-clicking-from-scrolling-到的顶/
类似问题的其他想法 如何在滚动DIV元素时阻止页面滚动？
如何区分手动滚动(通过鼠标滚轮/滚动条)与Javascript/jQuery滚动？
类似问题的其他方法 HTML锚链接没有滚动或跳转
这是一个包含相关元素的HTML和CSS示例.您可以调整浏览器窗口的大小,以便主页面有一个滚动条来查看不需要的自动滚动效果:
<html>
<body>
<div id="main">
<div id="mainwide">
<div id="left">
<a href="#2">2</a>
</div>
<div id="right">
<a id="link" name="2">2</a>
</div>
</div>
</div>
</body>
</html>
这是CSS
html {
background-color: LightGreen;
}
#main {
border: 1px solid black;
margin-top: 200px;
width: 500px;
height: 300px;
overflow: hidden;
}
#mainwide {
width: 1000px;
height: 300px;
}
#left {
background-color: MediumSpringGreen;
width: 500px;
height: 300px;
float: left; …我在Stackoverflow上搜索过,但似乎无法找到这个问题的满意答案.基本上我想知道滚动是通过鼠标滚轮还是浏览器滚动条完成的.
我在页面上有一些链接,目的是"走到顶端",通过将页面滚动到顶部并获得一个漂亮的动画来完成.我注意到,有时在页面滚动时,用户会想要向下滚动,例如,但这是不可能的.屏幕只会断断续续,但会继续制作动画,直到它到达顶部.
我想在用户尝试滚动时停止动画,因此我编写了这段代码:
$('#gototop').click(function() {
$('body').animate({scrollTop:0},3000);
$(window).scroll(function () {
$('body').stop();
});
return false;
})
这段代码存在问题,因为animate()计为滚动,因此它只会在停止之前移动一点点.
我也尝试过按键作为选项,但鼠标滚动不会注册为键.
当用户滚动时,有没有办法调用我的滚动功能,而不是动画()？
jquery ×6
javascript ×5
anchor ×1
css ×1
height ×1
mouseevent ×1
page-jump ×1
scroll ×1
scrollto ×1
scrolltop ×1