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不能滑到最底端的解决办法的更多相关文章

  1. JS.中文乱码,Jsp\Servlet端的解决办法

    JS.中文乱码,Jsp\Servlet端的解决办法 2010-03-08 15:18:21|  分类: Extjs |  标签:encodeuricomponent  乱码  urldecoder   ...

  2. 使用scrollpagination实现页面底端自动加载无需翻页功能

    当阅读到页面最底端的时候,会自动显示一个"加载中"的功能,并自动从服务器端无刷新的将内容下载到本地浏览器显示. 这样的自动加载功能是如何实现的?jQuery的插件 ScrollPa ...

  3. 基于JQuery实现滚动到页面底端时自动加载更多信息

    基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = par ...

  4. delphi 自动滚动到最底端scroll

    自动滚动到最底端scrollUses MSHTML;{$R *.dfm}var  ScrollPos: integer=0;procedure TForm1.Button1Click(Sender: ...

  5. 解决位于底端Edittext 输入时被软盘遮盖

    遇到这种情况我们首先到网上搜一圈,大概情况是需要设置<activity/> android:windowSoftInputMode="adjustResize" ,按照 ...

  6. Android: ScrollView监听滑动到顶端和底端

    在项目中需要监听ScrollView滑动到顶端和底端的时候以实现自己的ScrollView,那么怎样去监听呢?今天查看了一下ScrollView的源码,找到了一种方法.先看一下源码中的overScro ...

  7. 移动端 iphone touchmove滑到边界(浏览器地址拦及以上) touchend失效解决办法

    在移动端h5页面:尤其那些全屏幕的盒展示切换页面,当用户无意中将手指滑到了 浏览器地址拦以上(中国移动这快区域):此时,手指已经离开屏幕了,但是ios上无法监听到touchend 事件:touchen ...

  8. jq 测试是否到页面最底端

    $(window).scroll(function () { if ($(document).scrollTop() + $(window).height() >= $(document).he ...

  9. selenium下拉到页面最底端

    selenium操控浏览器下拉到页面最底端: #!/usr/bin/env python # -*- coding: utf-8 -*- from selenium import webdriver ...

随机推荐

  1. SQL Server 事务日志文件已满,收缩日志文件(9002)

    错误如下图: 1.数据库 → 属性 → 选项 → 恢复模式 → 选择‘简单’:如下图: 2.任务 → 收缩 → 文件类型‘文件’ → 收缩模式‘在释放未使用的空间前重新组织页’,将文件收缩到K,大小填 ...

  2. linux的自有(内置)服务

    运行模式(运行级别) 在linux中存在一个进程,init(initialize初始化)进程号为1 ,该进程对应一个配置文件inittab 文件路径为/etc/inittab centOS6.5存在7 ...

  3. MySQL 是如何解决幻读的

    MySQL 是如何解决幻读的 一.什么是幻读 在一次事务里面,多次查询之后,结果集的个数不一致的情况叫做幻读. 而多出来或者少的哪一行被叫做 幻行 二.为什么要解决幻读 在高并发数据库系统中,需要保证 ...

  4. SpringBoot搭建

    使用eclipse搭建项目 File>New> 点击下一步 填写相关信息,点击下一步 勾选需要的组件,点击下一步. 会生成一个项目,如下图 打开pom.xml文件 <?xml ver ...

  5. 爬取5K分辨率超清唯美壁纸

    目录 爬取5K分辨率超清唯美壁纸 简介 编写思路 使用教程 演示图片 完整源代码 @ 爬取5K分辨率超清唯美壁纸 简介 壁纸的选择其实很大程度上能看出电脑主人的内心世界,有的人喜欢风景,有的人喜欢星空 ...

  6. CodeBlocks卸载后重装 编译c文件提示错误信息“No such file or directory”

    编译最简单的helloworld程序,提示第一行#include<stdio.h> 找不到头文件. 解决方法: 再次卸载CodeBlocks后,将之前的配置文件删除. 路径:C:\User ...

  7. nginx基础之【study one】

    Nginx是种代理服务器,即可以作为反向代理服务器.邮件服务器等HTTP服务器,支持很多第三方模块扩展,如GZip.SSL.FastCGI. 最常用的功能有Http反向代理.负载均衡和Web缓存: 1 ...

  8. 使用python抓取数据之菜鸟爬虫1

    ''' Created on 2018-5-27 @author: yaoshuangqi ''' #本代码获取百度乐彩网站上的信息,只获取最近100期的双色球 import urllib.reque ...

  9. python_while

    while 格式 while 条件 : pass 使用 while True : print("精忠报国") print("粉红的回忆") print(&quo ...

  10. flutter 监听返回键

    ### 监听手机返回键(双击退出) ``` import 'package:fluttertoast/fluttertoast.dart'; //提示插件 class WillPopScopeTest ...