版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
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"></span>
</div>
</a>
<a href="bind_bank.html">
<div class="list">
<span class="list-text">绑定银行卡</span>
<span class="mui-icon mui-icon-arrowright"></span>
</div>
</a>
<a href="bind_alipay.html">
<div class="list">
<span class="list-text">绑定支付宝</span>
<span class="mui-icon mui-icon-arrowright"></span>
</div>
</a>
</div>
<div class="record-list" id="scrollSlider">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item mui-active"><span>任务</span></a>
<a class="mui-control-item"><span>提现记录</span></a>
<a class="mui-control-item"><span>邀请奖金</span></a>
<a class="mui-control-item"><span>任务分佣</span></a>
</div>
<div class="mui-slider-group">
<div class="mui-slider-item mui-control-content mui-active" id="item1">
<!--循环-->
<!--<div class="list">
<div class="left">
<span>任务奖励</span>
</div>
<div class="right">
<span class="red">+10</span>
<span class="date">2019-01-02 10:23:09</span>
</div>
</div>-->
</div>
<div class="mui-slider-item mui-control-content">
<div class="list">
<div class="left">
<span>提现</span>
</div>
<div class="right">
<span class="red">-10</span>
<span class="date">2019-03-02 10:23:09</span>
</div>
</div>
</div>
<div class="mui-slider-item mui-control-content">
<div class="list">
<div class="left">
<span>邀请奖金</span>
</div>
<div class="right">
<span class="red">+10</span>
<span class="date">2019-03-02 10:23:09</span>
</div>
</div>
</div>
<div class="mui-slider-item mui-control-content">
<div class="list">
<div class="left">
<span>任务奖励</span>
</div>
<div class="right">
<span class="red">+10</span>
<span class="date">2019-03-02 10:23:09</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!--<script type="text/javascript" src="js/mui.min.js"></script>-->
<script>
$("#sliderSegmentedControl").on("click","a",function(){
$(this).addClass("mui-active").siblings().removeClass("mui-active");
var index = $(this).index();//点击li时，保存当前li的下标index，
$(".mui-slider-group .mui-slider-item").eq(index).addClass("mui-active").siblings().removeClass("mui-active");
})
var windowHeight = $(this).height();
var scrollHeight = windowHeight-($(".money-con").outerHeight()+$(".b-list").outerHeight())-70; //固定滚动区域的高
var top = windowHeight-($(".money-con").outerHeight()+$(".b-list").outerHeight());
$("#scrollSlider").css("height",scrollHeight);
$("#sliderSegmentedControl").css("top",top);
var page = 1, //分页码
off_on = false; //分页开关(滚动加载方法 1 中用的)
//加载数据
var LoadingDataFn = function() {
var dom = '';
for(var i = 0; i < 10; i++) {
dom += '<div class="list">';
dom += '<div class="left">';
dom += '<span>邀请奖金</span>';
dom += '</div>';
dom += '<div class="right">';
dom += '<span class="red">+10</span>';
dom += '<span class="date">2019-03-02 10:23:09</span>';
dom += '</div>';
dom += '</div>';
}
$('#item1').append(dom);
off_on = true; //[重要]这是使用了 {滚动加载方法1} 时 用到的 ！！！[如果用 滚动加载方法1 时：off_on 在这里不设 true的话， 下次就没法加载了哦！]
};
//初始化， 第一次加载
$(document).ready(function() {
LoadingDataFn();
});
//滚动加载方法1
$('#scrollSlider').scroll(function(){
$(".money-con").css("display","none");
$(".b-list").css("display","none");
$("#scrollSlider").css("height",windowHeight-60);
console.log($(this)[0].scrollTop+"++++++"+$(this).height());
//当时滚动条离底部60px时开始加载下一页的内容
if(($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
//这里用 [ off_on ] 来控制是否加载 （这样就解决了 当上页的条件满足时，一下子加载多次的问题啦）
if(off_on) {
off_on = false;
page++;
console.log("第" + page + "页");
LoadingDataFn(); //调用执行上面的加载方法
}
}
var scrollTop = $(this).scrollTop();//返回或设置匹配元素的滚动条的垂直位置
console.log("滚动条垂直的位置"+scrollTop);
if(scrollTop==0){
$(".money-con").css("display","block");
$(".b-list").css("display","block");
$("#scrollSlider").css("height",scrollHeight);
}
});
</script>
</body>
</html>
css
/*我的钱包*/
.myWallet{
width: 100%;
background-color: #f4f4f4;
}
.myWallet .top{
position: fixed;
width: 100%;
height: 20px;
background-color: #945fe3;
}
.myWallet .top .content{
width: 100%;
position: absolute;
top: 0;
overflow: hidden;
}
.myWallet .top .content .money-con,.myWallet .top .content .b-list,.myWallet .top .content .record-list{
width: 94%;
margin: 0% 3% 2%;
background-color: #fff;
border-radius: 5px;
}
.myWallet .top .content .money-con .t-money{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-bottom: 1px solid #f4f4f4;
box-sizing: border-box;
}
.myWallet .top .content .money-con .t-money span,.myWallet .top .content .money-con .j-money .left span,.myWallet .top .content .money-con .j-money .right span{
display: block;
color: #a4a4a4;
font-size: 1.2rem;
}
.myWallet .top .content .money-con .t-money span{
line-height: 30px;
}
.myWallet .top .content .money-con .t-money span.num{
color: #130b18;
font-size: 2rem;
line-height: 30px;
padding-top: 5%;
}
.myWallet .top .content .money-con .j-money{
width: 100%;
display: flex;
flex-direction: row;
}
.myWallet .top .content .money-con .j-money .left,.myWallet .top .content .money-con .j-money .right{
width: 50%;
text-align: center;
margin: 2% 0%;
}
.myWallet .top .content .money-con .j-money .left {
border-right: 1px solid #f4f4f4;
box-sizing: border-box;
}
.myWallet .top .content .money-con .j-money .left span.num,.myWallet .top .content .money-con .j-money .right span.num{
color: #130b18;
font-size: 1.8rem;
line-height: 30px;
}
.myWallet .top .content .b-list .list {
width: 100%;
height: 50px;
line-height: 48px;
display: flex;
flex-direction: row;
justify-content: space-between;
color: #130b18;
font-size: 1.5rem;
border-bottom: 1px solid #f4f4f4;
box-sizing: border-box;
padding: 0 4%;
}
.myWallet .top .content .b-list span {
display: inline-block;
height: 4.5rem;
line-height: 4.4rem;
}
.myWallet .record-list .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active span{
color: #e7910a;
}
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
border: none;
}
.myWallet .record-list .mui-slider-indicator.mui-segmented-control{
width: 94.3%;
border-bottom: 1px solid #f4f4f4;
box-sizing: border-box;
background-color: #fff;
position: fixed;
z-index: 1;
}
.myWallet .record-list .mui-segmented-control .mui-control-item:first-child{
width: 17.8%;
}
.myWallet .record-list .mui-segmented-control .mui-control-item{
display: inline-block;
width: 26.8%;
padding-top: 2%;
}
.myWallet .record-list .mui-slider-group{
height: auto;
margin-top: 50px;
}
.myWallet .record-list .mui-slider-group .mui-slider-item .list {
width: 100%;
padding: 2% 5%;
border-bottom: 1px solid #fafafa;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 1.6rem;
}
.myWallet .record-list .mui-slider-group .mui-slider-item .list:last-child{
margin-bottom: 20px;
}
.myWallet .record-list .mui-slider-group .mui-slider-item .list .left {
color: #7d7d7d;
font-size: 1.4rem;
}
.myWallet .record-list .mui-slider-group .mui-slider-item .list .right {
font-size: 1.4rem;
color: #282828;
}
.myWallet .record-list .mui-slider-group .mui-slider-item .list .right span {
display: block;
color: #e30a0a;
font-size: 1.5rem;
line-height: 1.8rem;
text-align: right;
}
.myWallet .record-list .mui-slider-group .mui-slider-item .list .right span.date {
font-size: 1.2rem;
color: #a5a5a5;
}