IScroll5不能滑到最底端的解决办法
IScroll总体上用起来比较简单,但是如果用不好的可能会产生底部一点滚动不上去的问题。
环境:weui+iscroll5
整体布局及id如下
searchbar
wrapper
divscroll
window.onload = function () {
FillList();
}
function FillList() {
try {if (myScroll == undefined || myScroll == null) loadedsroll();
else myScroll.refresh();
}
catch (e) {
}
}
var myScroll = null;
var wrapperheight = 0;
var isMore = false; //是否可刷新标记
var pageIndex = 1;
var pageSize = 10;
//加载Iscroll
function loadedsroll() {
setTimeout(function () {
myScroll = new IScroll('#wrapper', { click: true });
myScroll.on('scrollStart', function () {
document.activeElement.blur();
});
myScroll.on('scrollEnd', function () {
var temp_height = 0;
temp_height = $("#wrapper").height();
try {
var hwindow = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight)- $('#searchBar').height();
if (temp_height > hwindow)
temp_height = hwindow;
}
catch (e) { }
$("#wrapper").height(temp_height);
$("#divscroll").css("min-height", temp_height + 1);
if (this.y <= this.maxScrollY) {
if (isMore == false) {
$("#divscroll").height("");this.refresh();
return;
}
pageIndex = pageIndex + 1;
FillList();
this.refresh()
} else {
this.refresh()
}
});
}, 100);
}
按上面的写法一般没有问题,支持ajax加载,只要把要加载的数据放到FillList中即可,以下内容是关键,不注意的话,divscroll内部元素底部会被挡一部分。
1、之前通过设置divscroll当前高度+一个额外高度解决,但有时加固定高度误差比较大,滑动到底部会有额外一段空白,用户体验不好。
2、开发者模式可以看到是总高度不对,即使设置内部元素margin也不行。
3、尝试使用网上说的加载完毕后refresh无效。
通过测试研究有两种解决办法:
1、设置postion:abolute;
2、设置#divscroll元素的padding-bottom:1px,设为0不起作用,设置1px即可。
即
#divscroll {
position: absolute;
width: 100%;
}
或者
#divscroll {
padding-bottom:1px;
}
实际项目中处理前后滚动到最底部时的效果(PS:虽然解决了,但不明白什么原因造成了这个问题,哪位同学如果知道的话请指点下。)

IScroll5不能滑到最底端的解决办法的更多相关文章
- JS.中文乱码,Jsp\Servlet端的解决办法
JS.中文乱码,Jsp\Servlet端的解决办法 2010-03-08 15:18:21| 分类: Extjs | 标签:encodeuricomponent 乱码 urldecoder ...
- 使用scrollpagination实现页面底端自动加载无需翻页功能
当阅读到页面最底端的时候,会自动显示一个"加载中"的功能,并自动从服务器端无刷新的将内容下载到本地浏览器显示. 这样的自动加载功能是如何实现的?jQuery的插件 ScrollPa ...
- 基于JQuery实现滚动到页面底端时自动加载更多信息
基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = par ...
- delphi 自动滚动到最底端scroll
自动滚动到最底端scrollUses MSHTML;{$R *.dfm}var ScrollPos: integer=0;procedure TForm1.Button1Click(Sender: ...
- 解决位于底端Edittext 输入时被软盘遮盖
遇到这种情况我们首先到网上搜一圈,大概情况是需要设置<activity/> android:windowSoftInputMode="adjustResize" ,按照 ...
- Android: ScrollView监听滑动到顶端和底端
在项目中需要监听ScrollView滑动到顶端和底端的时候以实现自己的ScrollView,那么怎样去监听呢?今天查看了一下ScrollView的源码,找到了一种方法.先看一下源码中的overScro ...
- 移动端 iphone touchmove滑到边界(浏览器地址拦及以上) touchend失效解决办法
在移动端h5页面:尤其那些全屏幕的盒展示切换页面,当用户无意中将手指滑到了 浏览器地址拦以上(中国移动这快区域):此时,手指已经离开屏幕了,但是ios上无法监听到touchend 事件:touchen ...
- jq 测试是否到页面最底端
$(window).scroll(function () { if ($(document).scrollTop() + $(window).height() >= $(document).he ...
- selenium下拉到页面最底端
selenium操控浏览器下拉到页面最底端: #!/usr/bin/env python # -*- coding: utf-8 -*- from selenium import webdriver ...
随机推荐
- git排除插件(.ignore)配置
# Created by .ignore support plugin (hsz.mobi) ### Maven template target/ ### JetBrains template # C ...
- php微信h5支付超简单!!!
本示例应用于tp3.2版本 不懂私聊我QQ:1195989301 请备注来意! 代码链接 请点击下载 密码: ekd4 不喜欢打字望谅解.....
- 毕业设计(4):基于MicroPython的超声波倒车雷达系统
前言 倒车雷达是汽车驻车或者倒车时的安全辅助装置,能以声音或者更为直观的显示告知驾驶员周围障碍物的情况,解除了驾驶员驻车.倒车和起动车辆时前后左右探视所引起的困扰,并帮助驾驶员扫除了视野死角和视线模糊 ...
- jeecg入门操作—一对多表单开发
一.创建主表 创建订单主表(torder_main) 二.创建附表客户信息表(torder_customer) 设置附表页面外键不可见 设置附表外键 三.创建附表机票 信息表(torder_tic ...
- 分布式存储ceph——(1)部署ceph
前言: 很多朋友想学ceph,但是开始ceph部署就让初学者举步为艰,ceph部署时由于国外源的问题(具体大家应该懂得),下载和安装软件便会卡住,停止不前.即使配置搭建了国内源后,执行ceph-dep ...
- Python-包-65
包 包是一种通过使用‘.模块名’来组织python模块名称空间的方式. 1. 无论是import形式还是from...import形式,凡是在导入语句中(而不是在使用时)遇到带点的,都要第一时间提高警 ...
- 移除 iview的Table组件固定两头后box-shadow阴影效果
.ivu-table-fixed{ box-shadow:0 0 0 #fff; }
- 微信内分享第三方H5链接无法使用内置浏览器打开的解决方案
很多朋友在微信内想分享转发H5链接的时候都会很容易碰到H5链接在微信内无法打开或在微信内无法打开app下载页的情况.通常这种情况微信会给个提示 “已停止访问该网址” ,那么导致这个情况的因素有哪些呢, ...
- CSS3 border-radius 圆角
圆角border-radius,其css如下 IE9+支持(就是ie6,ie7,ie8都不支持),默认值是0,不继承,可以像下面那样设置4个角的值,也可以单独设置,如 border-top-left- ...
- Django(三) ORM 数据库操作
大纲 一.DjangoORM 创建基本类型及生成数据库表结构 1.简介 2.创建数据库 表结构 二.Django ORM基本增删改查 1.表数据增删改查 2.表结构修改 三.Django ORM 字段 ...