87,996
社区成员
发帖
与我相关
我的任务
分享iscroll页面滚动条重新定位的问题,高手请进
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>rrr</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style type="text/css">
* {
margin: 0;
padding: 0
}
.herder_radius {
position: relative;
width: 100%;
background: #ccc;
}
.herder_text {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.herder_name {
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
left: 0;
top: 0;
right: 0;
margin: auto;
background: red;
text-align: center;
line-height: 80px;
font-weight: bold;
font-size: 50px;
-webkit-font-smoothing: antialiased;
font-family: '微软雅黑';
color: #fff;
white-space: nowrap;
overflow: hidden;
}
.content_box {
width: 100%;
background: #fff;
position: absolute;
top: 200px;
bottom: 0px;
left: 0;
overflow: hidden;
}
.herder_namefn {
text-align: center;
margin-top: 80px;
}
</style>
</head>
<body>
<div class="herder_radius" dataHeight="200">
<div class="herder_text">
<div class="herder_name">Re</div>
<div class="herder_namefn">测试程序</div>
</div>
</div>
<div class="content_box" id="wrapper">
<div>
<p>测</p>
<p>试</p>
<p>程</p>
<p>序</p>
<p>博</p>
<p>客</p>
<p>测</p>
<p>试</p>
<p>程</p>
<p>序</p>
<p>博</p>
<p>客</p>
<p>测</p>
<p>试</p>
<p>程</p>
<p>序</p>
<p>博</p>
<p>客</p>
<p>测</p>
<p>试</p>
<p>程</p>
<p>序</p>
<p>博</p>
<p>客</p>
<p>测</p>
<p>试</p>
<p>程</p>
<p>序</p>
<p>博</p>
<p>客</p>
<p>测</p>
<p>试</p>
<p>程</p>
<p>序</p>
<p>博</p>
<p>客</p>
<p>测</p>
<p>试</p>
<p>程</p>
<p>序</p>
<p>博</p>
<p>客</p>
</div>
</div>
<script src="http://sms.reyo.cn/include/aa/jquery.min.js"></script>
<script src="http://sms.reyo.cn/include/aa/iscroll-probe.js"></script>
<script>
(function ($) {
let herder_radiusH = $('.herder_radius').attr('dataHeight');
let herder_radiusT = $('.content_box').offset().top;
let windowH = $(window).height();
$('.herder_radius').height(herder_radiusH);
$('.content_box').height(windowH - herder_radiusH);
let herder_text = 0;
$(".herder_text>div").map(function () {
herder_text += parseInt($(this).height());
})
$('.herder_text').height(herder_text)
window.magnify = function (option) {
let myScroll = new IScroll('#wrapper', {
probeType: 3,
scrollbars: true,
interactiveScrollbars: true,
shrinkScrollbars: 'scale',
fadeScrollbars: true,
mouseWheel: true
});
myScroll.on('scroll', updatePosition);
myScroll.on('scrollEnd', updatePosition);
function updatePosition() {
let scrollH = this.y >> 0;
let radiuSscrollH = $('.herder_radius').height()
if (herder_text + scrollH > 0) {
let scale = scrollH / herder_radiusH + 1
$('.herder_text').css({
'transform': 'scale(' + scale + ')'
})
$('.herder_radius').css({
'height': Number(herder_radiusH) + scrollH,
})
$('.content_box').css({
'top': herder_radiusT + scrollH,
'height': windowH - herder_radiusH - scrollH
})
}
}
}
})(jQuery)
new magnify();
</script>
</body>
</html>
问题当拉到的时候总是滚动不到最下面，不知什么地方出错了，望大神出手！！！谢谢
...全文
请发表友善的回复…
发表回复
Logerlink 2018-06-30
- 打赏
- 举报
将高度重新调整就可以了
<script>
(function ($) {
/*let dataObj ={
herder_radiusH ,
herder_radiusT,
windowH,
herder_text
}*/
let dataObj = init();
$(window).resize(function(){
dataObj = init();
})
window.magnify = function (option) {
let myScroll = new IScroll('#wrapper', {
probeType: 3,
scrollbars: true,
interactiveScrollbars: true,
shrinkScrollbars: 'scale',
fadeScrollbars: true,
mouseWheel: true
});
myScroll.on('scroll', updatePosition);
myScroll.on('scrollEnd', updatePosition);
function updatePosition() {
let scrollH = this.y >> 0;
if (dataObj.herder_text + dataObj.scrollH > 0) {
let scale = scrollH / dataObj.herder_radiusH + 1
$('.herder_text').css({
'transform': 'scale(' + scale + ')'
})
$('.herder_radius').css({
'height': Number(dataObj.herder_radiusH) + scrollH,
})
$('.content_box').css({
'top': dataObj.herder_radiusT + scrollH,
'height': dataObj.windowH - dataObj.herder_radiusH - scrollH
})
}
}
}
})(jQuery)
new magnify();
function init(){
let herder_radiusH = $('.herder_radius').attr('dataHeight');
let herder_radiusT = $('.content_box').offset().top;
let windowH = $(window).height();
$('.herder_radius').height(herder_radiusH);
$('.content_box').height(windowH - herder_radiusH);
var herder_text = 0;
$(".herder_text>div").map(function () {
herder_text += parseInt($(this).height());
})
$('.herder_text').height(herder_text);
let dataObj ={
herder_radiusH: herder_radiusH,
herder_radiusT: herder_radiusT,
windowH: windowH,
herder_text: herder_text
}
return dataObj;
}
</script>
Logerlink 2018-06-30
- 打赏
- 举报
程序刚开始是没有问题的
不过当视口调整（高度变大）的时候，此时IScroll作用的区域保持不变（高度没变），所以底部就会出现空白
不过当视口调整（高度变大）的时候，此时IScroll作用的区域保持不变（高度没变），所以底部就会出现空白
ambit_tsai-微信 2018-06-30
- 打赏
- 举报
调整尺寸后，需要通知iScroll重新计算一下
function updatePosition() {
/* 代码块 */
myScroll.refresh(); // 调用refresh方法
}
Logerlink 2018-06-30
- 打赏
- 举报
你的网站不能访问 跑不起来
reyoreyoreyo 2018-06-30
- 打赏
- 举报
自己顶一下 ｜｜｜
reyoreyoreyo 2018-06-30
- 打赏
- 举报
厉害就差了这一句！！！非常感谢 ！！
reyoreyoreyo 2018-06-30
- 打赏
- 举报
非常感谢，可你这样一改代码效果完全没有了！再帮忙看一下。我源码是有动态效果的
reyoreyoreyo 2018-06-30
- 打赏
- 举报
可以访问了，再帮忙看看！谢谢
