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;
}