gpt4 book ai didi

jquery - 类似 Twitter 和 Facebook 的滚动事件处理

转载 作者:行者123 更新时间:2023-11-28 04:07:14 24 4
gpt4 key购买 nike

我一直在尝试将 scroll 事件绑定(bind)到页面上的元素,并在滚动时加载更多内容,就像 Twitter 或 Facebook 那样。

HTML

<div id="main-content">
<ul class="event-list big row" id="event-list">
...
</ul>
</div>

CSS

#main-content {
width: 984px;
overflow: visible;
margin: 0 auto;
color: #101010;
width: 974px;
padding: 10px 0 7px 0;
}
#main-content .event-list.big {
width: 1080px;
padding: 0 0 20px 0;
}

JS代码

$('#event-list').scroll(function() {
var curScroll = $(this)[0].scrollTop,
maxScroll = $(this)[0].scrollHeight - $(this).height();

console.log(curScroll, ' :: ', maxScroll);

if ((curScroll >= maxScroll - 200) && !loading) {
loading = true;

$(this)[0].scrollTop = curScroll;

$('.loading').fadeIn('fast');

if (page <= $('.page').length) {
loadMore();
}
}
});

当我滚动时,scroll 事件没有被触发,它甚至没有打印出 curScrollma​​xScroll

到底是什么导致了这个问题,也许是 CSS 样式错误或者我的 js 代码错误?

最佳答案

这是我认为您希望触发滚动事件的工作示例。通过设置“溢出:滚动”将 div 用作可滚动区域。注意:如果列表在初始加载时足够长,您只会获得滚动事件。 (请参阅主要内容上的高度属性。我会把 ajax 加载留给你。:)

CSS

 #main-content {
width: 984px;
overflow: scroll;
margin: 0 auto;
color: #101010;
width: 974px;
height: 100px;
padding: 10px 0 7px 0;
}
#main-content .event-list.big {
width: 1080px;
padding: 0 0 20px 0;
}

脚本

$(document).ready(function() {
$('#main-content').scroll(function() {
var curScroll = $(this)[0].scrollTop,
maxScroll = $(this)[0].scrollHeight - $(this).height();

console.log(curScroll, ' :: ', maxScroll);

if ((curScroll >= maxScroll - 200) && !loading) {
loading = true;

$(this)[0].scrollTop = curScroll;

$('.loading').fadeIn('fast');

if (page <= $('.page').length) {
loadMore();
}
}
});
});

HTML

<div id="main-content">
<ul class="eventlist big row" id="event-list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>

关于jquery - 类似 Twitter 和 Facebook 的滚动事件处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14338590/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com