看附图,红圈里面的滚动条,始终去不掉。demo:下拉刷新,上拉加载,头部slider轮播,使用了mui-scroll-wrapper,设置
$('.mui-scroll-wrapper').scroll({
bounce: false,
indicators: false, //是否显示滚动条
deceleration:deceleration
}); 滚动条不但没消失,连滚动都不能滚动了,求解决!!!!!!!!!!!!!!
以下为部分代码:
<body>
<header id="header" class="mui-bar mui-bar-nav own-homepae-title-transparent-color">
<a class="mui-icon mui-icon-contact mui-pull-left own-homepae-title-text-color" style="color:#63A7F2;"></a>
<h1 class="mui-title own-homepae-title-text-color" style="color:#63A7F2;font-size: 20px;">新闻</h1>
</header>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="background: #fff">
<div id="scroll" class="mui-scroll" style="margin-top: -45px;">
<div class="mui-content" style="background: #F1F1F1;">
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<div class='mui-slider-item mui-slider-item-duplicate'>
<a>
<img src='../img/default.jpg'>
<p class='mui-slider-title'>暂无数据</p>
</a>
</div>
</div>
<div class="mui-slider-indicator mui-text-right">
<div class='mui-indicator mui-active'></div>
</div>
</div>
<div id="adver_title"></div>
</div>
<div class="mui-content" style="margin-top: -15px;">
<ul id="news-list" class="mui-table-view">
<li id="nullData" class='mui-table-view-cell mui-media'>
<a>
<img class='mui-media-object mui-pull-left' src='../img/default.jpg'>
<div class='mui-media-body'>
<p id='news-title' style='background: #EEE;width:50%;'> </p>
<p id='news-desc' class='mui-ellipsis-2' style='background: #EEE;idth:100%;'> </p>
</div>
</a>
</li>
<li id="nullData" class='mui-table-view-cell mui-media'>
<a>
<img class='mui-media-object mui-pull-left' src='../img/default.jpg'>
<div class='mui-media-body'>
<p id='news-title' style='background: #EEE;width:50%;'> </p>
<p id='news-desc' class='mui-ellipsis-2' style='background: #EEE;idth:100%;'> </p>
</div>
</a>
</li>
<li id="nullData" class='mui-table-view-cell mui-media'>
<a>
<img class='mui-media-object mui-pull-left' src='../img/default.jpg'>
<div class='mui-media-body'>
<p id='news-title' style='background: #EEE;width:50%;'> </p>
<p id='news-desc' class='mui-ellipsis-2' style='background: #EEE;idth:100%;'> </p>
</div>
</a>
</li>
<li id="nullData" class='mui-table-view-cell mui-media'>
<a>
<img class='mui-media-object mui-pull-left' src='../img/default.jpg'>
<div class='mui-media-body'>
<p id='news-title' style='background: #EEE;width:50%;'> </p>
<p id='news-desc' class='mui-ellipsis-2' style='background: #EEE;idth:100%;'> </p>
</div>
</a>
</li>
</ul>
</div>
</div>
<!--<div class="mui-loader srm-loader" id="loading">加载中...</div>-->
<!--返回顶部按钮-->
<a id="back_top" class="backTop">
<!--<span class="fa fa-chevron-up"></span>-->
<span class="mui-icon-extra mui-icon-extra-top"></span>
</a>
</div>
<script type="text/javascript" src="../js/mui.min.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/md5.min.js"></script>
<script type="text/javascript" src="../js/imgload.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" charset="utf-8">
var newsPage = 1;
var nextUrl;
var newsUrl = 'http://apis.baidu.com/txapi/tiyu/tiyu';
var adverUrl = 'http://apis.baidu.com/txapi/mvtp/meinv';
var hasMore = true;
var isNetConnection = true;
// var loading = document.getElementById("loading"); //正在加载
mui.init({
pullRefresh: {
container: "#pullrefresh", //下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等
down: {
height: 80,
contentdown: "下拉刷新", //可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
contentover: "释放刷新", //可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
contentrefresh: "正在刷新...", //可选,正在刷新状态时,下拉刷新控件上显示的标题内容
callback: pulldownRefresh //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
},
up: {
contentrefresh: "正在加载...", //可选,正在加载状态时,上拉加载控件上显示的标题内容
contentnomore: '已全部加载', //可选,请求完毕若没有更多数据时显示的提醒内容;
callback: loadMore //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
}
}
});
if(mui.os.plus) {
mui.plusReady(function() {
if(plus.networkinfo.getCurrentType() == 1) {
isNetConnection = false;
}
document.addEventListener("netchange", onNetChange, false); //监听网络变化
setTimeout(function() {
pulldownRefresh();
}, 1000);
});
} else {
mui.ready(function() {
pulldownRefresh();
});
}
// var deceleration = mui.os.ios ? 0.003 : 0.0009;
// $('.mui-scroll-wrapper').scroll({
// bounce: false,
// indicators: true, //是否显示滚动条
// deceleration: deceleration
// });
//监听网络变化
function onNetChange() {
var nt = plus.networkinfo.getCurrentType();
switch(nt) {
case plus.networkinfo.CONNECTION_ETHERNET:
case plus.networkinfo.CONNECTION_WIFI:
case plus.networkinfo.CONNECTION_CELL2G:
case plus.networkinfo.CONNECTION_CELL3G:
case plus.networkinfo.CONNECTION_CELL4G:
isNetConnection = true;
//网络连接后自动刷新
pulldownRefresh();
alert("has networks!" + isNetConnection);
break;
default:
//网络未连接
isNetConnection = false;
alert("Not networks!" + isNetConnection);
break;
}
}
。
。
。
。
var scrollToTopBox = document.getElementById('back_top');
scrollToTopBox.addEventListener('tap', function() {
mui('.mui-scroll-wrapper').pullRefresh().scrollTo(0, 0, 10); //100毫秒滚动到顶
});
/**
-
滚动监听
*/
//Android上监听原生滚动,iOS上监听div滚动,上拉超过屏幕1/4后显示按钮,否则隐藏,可自行在条件判断中修改
if(mui.os.android) {
window.addEventListener('scroll', function(e) {
var trasparent_value = window.pageYOffset / (window.innerHeight / 4); //透明度
//jqurey 动态改变标题栏背景透明度
if(trasparent_value < 3) {
$(".own-homepae-title-transparent-color").css('background', 'rgba(255, 255, 255,' + trasparent_value + ')');
//改变标题栏下边阴影
if(trasparent_value < 1) {
$(".own-homepae-title-transparent-color").css('box-shadow', 'none');
} else {
$(".own-homepae-title-transparent-color").css('box-shadow', '0px 2px 2px #ccc');
}
//改变标题栏字体颜色
if(trasparent_value < 0.5) {
$(".own-homepae-title-text-color").css('color', '#ffffff');
} else {
$(".own-homepae-title-text-color").css('color', '#3E8CDE');
}
}//显示隐藏返回顶部图标 if(window.pageYOffset >= window.innerHeight / 4 && scrollToTopBox.classList.contains('hide')) { scrollToTopBox.classList.remove('hide'); } else if(window.pageYOffset < window.innerHeight / 4 && !scrollToTopBox.classList.contains('hide')) { scrollToTopBox.classList.add('hide'); } }); } else { document.getElementById('pullrefresh').addEventListener('scroll', function() { if(mui('#pullrefresh').pullRefresh().y <= window.innerHeight * (-1 / 4) && scrollToTopBox.classList.contains('hide')) scrollToTopBox.classList.remove('hide'); else if(mui('#pullrefresh').pullRefresh().y > window.innerHeight * (-1 / 4) && !scrollToTopBox.classList.contains('hide')) scrollToTopBox.classList.add('hide'); }); } </script>
</body>
1***@qq.com (作者)
body的滚动?请问下该怎样设置!
2016-11-16 17:27
欧阳1
设置body{overflow: hidden;}最好是设置全部(*)也许可能是你滑动区域的父级标签,不一定是body
2016-11-17 10:10