javascript 当附加到 div 时，scroll() 事件不会触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26231747/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
scroll() event not firing when attached to a div
提问by Randeep
<div class="row">
<div class="col-md-8" id="homeview-story"></div>
<div class="col-md-4" id="homeview-stream">
<div id="log"></div>
</div>
</div>
#homeview-story {
overflow: scroll;
width: 72%;
height: 800px;
}
#homeview-stream {
overflow: scroll;
width: 28%;
height: 800px;
}
$(document).ready(function() {
$('#homeview-story').scroll(function() {
$("#log").append("<div>Handler for .scroll() called.</div>");
});
});
Objective is to implement infinite scrolling for both homeview-storyand homeview-streamseparately to load respective data. The scroll function works on the window obj ($(window).scroll) but is not working with specific div.
目标是实现无限滚动homeview-story并homeview-stream分别加载各自的数据。滚动功能适用于窗口 obj ( $(window).scroll) 但不适用于特定的 div。
采纳答案by T J
The issue is that, #homeview-storyisn't overflowing, So it isn't scrolling. First of all it should have some content larger than that for it to scroll, which is missing in your code.
问题是，#homeview-story没有溢出，所以它没有滚动。首先，它应该有一些大于滚动的内容，这是您的代码中缺少的。
Here's a Demo, where #logohas a height greater than it's parent #homeview-streamand we're listening to it's scroll.
这是一个Demo，其中#logo的高度大于它的父级#homeview-stream，我们正在听它的滚动。
回答by Hymansonkr
"scroll"only works when the element is actually scrollable / scrolling. If you want scroll data regardless of element size, you can use "wheel"if your browser supports it.
"scroll"仅当元素实际可滚动/滚动时才有效。如果您想要滚动数据而不考虑元素大小，则可以"wheel"在浏览器支持的情况下使用。
document.addEventListener("wheel", function(event) {
console.log(event);
});
回答by specialone
Put a inner div in #homeview-story
在#homeview-story 中放置一个内部 div
<div class="row">
<div id="homeview-story">
<div class="inner"></div>
</div>
<div id="homeview-stream"></div>
</div>
$(document).ready(function() {
$('#homeview-story').bind('scroll',function() {
var html = "<div id='log'>Hello</div>";
$('#homeview-stream').append(html);
});
});
Hope this democan help you in what you want to achieve.
希望这个演示可以帮助你实现你想要的目标。
回答by Roy Prins
Are you actually scrolling inside the #homeview-story div? So not the page itself, because the jquery scroll() event obvious needs that (http://api.jquery.com/scroll/)
你真的在#homeview-story div里面滚动吗？所以不是页面本身，因为 jquery scroll() 事件显然需要（http://api.jquery.com/scroll/）
Are you loading your custom CSS after the bootstrap CSS? Otherwise your div might still not be set to overflow:scroll. Hmm, on second thought it probably would since you are referencing an ID. Just to make sure then.
您是否在引导 CSS 之后加载自定义 CSS？否则您的 div 可能仍未设置为溢出：滚动。嗯，第二个想法可能是因为您引用了一个 ID。只是为了确保那时。
回答by DebbieMiller
回答by Beyon
I was facing the same problem as you do, and I solved it by putting that specific selector that I want to be triggered by the scroll() functioninside the $(window).scroll() functionlike this:
我遇到了和你一样的问题，我通过放置我想要由scroll() function内部触发的特定选择器来解决它，$(window).scroll() function如下所示：
$(window).scroll(function() {
$('#homeview-story').scroll(function() {
$("#log").append("<div>Handler for .scroll() called.</div>");
});
});
I'm not sure if this solution is correct way of fixing this, but works fine for me.
我不确定此解决方案是否是解决此问题的正确方法，但对我来说效果很好。
