我发现当一些内容通过ajax推到页面顶部时,jquery的滚动事件会自动触发。请问有什么方法可以避免在添加内容时触发滚动事件吗?但是当用户使用鼠标滚轮、页面向上下滚动以及键盘向上下移动时,滚动事件仍然会被触发。
$(window).on('scroll', function () {
console.log("User manual scrolled.");
});
根据这个例子。 https://jsfiddle.net/q00jnv4n/
我发现当一些内容通过ajax推到页面顶部时,jquery的滚动事件会自动触发。请问有什么方法可以避免在添加内容时触发滚动事件吗?但是当用户使用鼠标滚轮、页面向上下滚动以及键盘向上下移动时,滚动事件仍然会被触发。
$(window).on('scroll', function () {
console.log("User manual scrolled.");
});
根据这个例子。 https://jsfiddle.net/q00jnv4n/
.off
函数用于移除事件处理程序。
在通过ajax加载内容之前,您应该使用$(window).off("scroll")
,然后在加载内容后再次使用$(window).on('scroll', function () {
。
通过使用.off
,您的滚动处理程序将在站点上加载内容时被删除。
停止显示似乎在移动的一个选项是通过调整scrollTop
来使其与#result
div高度的变化量相同,例如:scrollTop = (scrollTop + newHeight - oldHeight)
:
function AddContent() {
var height = $('#result').height();
console.log("height: " + height);
$(".UnloadedPara").each(function () {
//console.log();
$(this).replaceWith("<div>This is some new paragraph</div>");
});
var newHeight = $('#result').height();
$(window).scrollTop($(window).scrollTop() + newHeight - height);
}
$(window).scrollTop
时,会触发一个名为 'scroll' 的事件。如果用户点击了 Add Content
按钮,OP 希望抑制这个事件的触发。 - Shoaib Shakeel你的代码中使用了 window.scrollTop()
。由于 jQuery
在底层使用了 window.scrollTo()
,因此它会自动触发滚动事件。
你无法抑制由此触发的“scroll”事件。但是,你可以使用一个技巧来检测是否在你调用了 window.scrollTop()
之后调用了滚动事件。你可以在你的 AddContent
中设置一个布尔变量为 false
。然后在你的滚动事件处理程序中检查该变量是否为 false
。如果是,则将其设置为 true
并不执行任何操作。否则,执行你想要的操作。
我 fork 了你的 jsfiddle 并进行了更新:JsFiddle
参考this帖子,存在一个仅监听鼠标滚动的事件。
$(window).bind('mousewheel DOMMouseScroll', function(e){
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
// scroll up
} else {
// scroll down
}
});
你好,提摩太斯
这只是一个权宜之计,但如果您需要快速修复,您可以在新内容加载到顶部后将窗口滚动回按钮。
https://jsfiddle.net/msfq5mx0/
$(window).scrollTo(0,$("#btnAddContent").offset().top);
AddContent()
函数中有一行代码$(window).scrollTop(divHeight);
。 - Ahmad Ibrahim