上拉加载更多----jQuery中的scroll事件

最新推荐文章于 2021-12-29 10:40:13 发布

0?0

最新推荐文章于 2021-12-29 10:40:13 发布

阅读量359

点赞数

分类专栏： jQuery 上拉加载

本文链接：https://blog.csdn.net/weixin_42301962/article/details/102465072

版权

本文探讨了在jQuery中使用scroll事件实现上拉加载更多的问题，重点指出必须设置滚动区域为固定高度，当内容超出该高度时，scroll事件才会触发。文章提供了包含和不包含公用底部的两种情况，并附带相关HTML和CSS实例如何操作。

摘要由CSDN通过智能技术生成

scroll事件不触发，找到的原因是滚动区域必须设置固定高度，超出固定高度才会滚动

1.计算滚动区域高度可能会用到的jQuery函数

有公用的底部

// 计算滚动区域到页面顶部的高度
var windowHeight = $(this).height();   //页面窗口高度
var sibHeight = $(".mui-slider-group").offset().top+50;    //计算滚动区域之外的高度，滚动区域到页面顶部的高度加上底部高度，50为底部导航栏的高度
var scrollHeight = windowHeight-sibHeight;   //滚动区域高度
$(".mui-slider-group").css("height",scrollHeight).css("overflow-y","scroll").css("overflow-x","hidden");   //动态设置滚动区域高度

无公用底部
实例如下：

html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>点赞-我的钱包</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/index.css" />
		<style>
			#scrollSlider{
				/*height: 300px;*/
				overflow-y: scroll;
				position: relative;
			}

		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav mui-pull-left" onclick="javascript :history.back(-1);"></a>
			<h1 class="mui-title">我的钱包</h1>
		</header>
		<div class="mui-content mui-scroll-wrapper myWallet">

			<div class="top">
				<div class="content">

					<div class="money-con">
						<div class="t-money">
							<span class="num">2301.00</span>
							<span>可提现金额(元)</span>
						</div>
						<div class="j-money">
							<div class="left">
								<span class="num">100.00</span>
								<span>今日奖励(元)</span>
							</div>
							<div class="right">
								<span class="num">100.00</span>
								<span>总奖励(元)</span>
							</div>
						</div>
					</div>

					<div class="b-list">
						<a href="withdrawal.html">
							<div class="list">
								<span class="list-text">提现</span>
								<span class="mui-icon mui-icon-arrowright">