HTML结构如下：

<div class="outerScroller comment">
<div class='scroll comment'>
<div class="inner comment" style='overflow:auto;'>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</div>
</div>
js代码部分：
! function () {
function scroll(outerscroller, scroll, inner, callback) {
this.outerScroller = document.querySelector(outerscroller);
this.scroll = document.querySelector(scroll);
this.inner = document.querySelector(inner)
this.load = function () {
var _this = this;
this.scroll.style.height = window.innerHeight + 'px';
var touchStart = 0;
var touchDis = 0;
this.outerScroller.addEventListener('touchstart', function (event) {
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
touchStart = touch.pageY; //获取到按下的页面的位置
}, false);
this.outerScroller.addEventListener('touchmove', function (event) {
var touch = event.targetTouches[0];
console.log(touch.pageY, touchStart)
if (_this.inner.scrollHeight - _this.inner.scrollTop <= _this.inner.clientHeight) {
 
_this.scroll.style.top = _this.scroll.offsetTop + touch.pageY - touchStart +
'px'; //页面定位的高度+页面移动点的位置-开始按下的页面位置 scroll.style.top = scroll.offsetTop + touch.pageY-touchStart + 'px'
touchStart = touch.pageY; //将当前的位置赋值给开始移动的位置
} else {
return
}
}, false);
this.outerScroller.addEventListener('touchend', function (event) {
touchStart = 0;
var top = _this.scroll.offsetTop;
if (top < -80) callback && callback();
if (top < 0) {
var time = setInterval(function () {
_this.scroll.style.top = _this.scroll.offsetTop + 2 + 'px';
if (_this.scroll.offsetTop >= 0) {
clearInterval(time);
}
}, 1)
}
}, false);
}
this.load();
}
window.scroll = scroll;
}()
 
var ns = new scroll('.outerScroller', '.scroll', '.inner', function () {
var ul = document.getElementsByTagName('ul')[0];
 
for (var i = 10; i > 0; i--) {
var node = document.createElement("li");
node.innerHTML = "I'm new" + i;
ul.appendChild(node)
}
})
 
CSS样式表：
.comment {
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
left: 0px;
overflow: hidden;
}
li {
list-style-type: none;
height: 35px;
background: #ccc;
border-bottom: solid 1px #fff;
text-align: left;
line-height: 35px;
padding-left: 15px;
}
ul {
width: 100%;
margin-top: 0px;
position: absolute;
left: 0px;
padding: 0px;
top: 0px;
}
 
完整的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.comment {
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
left: 0px;
overflow: hidden;
}
li {
list-style-type: none;
height: 35px;
background: #ccc;
border-bottom: solid 1px #fff;
text-align: left;
line-height: 35px;
padding-left: 15px;
}
ul {
width: 100%;
margin-top: 0px;
position: absolute;
left: 0px;
padding: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="outerScroller comment">
<div class='scroll comment'>
<div class="inner comment" style='overflow:auto;'>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</div>
</div>
<script>
! function () {
function scroll(outerscroller, scroll, inner, callback) {
this.outerScroller = document.querySelector(outerscroller);
this.scroll = document.querySelector(scroll);
this.inner = document.querySelector(inner)
this.load = function () {
var _this = this;
this.scroll.style.height = window.innerHeight + 'px';
var touchStart = 0;
var touchDis = 0;
this.outerScroller.addEventListener('touchstart', function (event) {
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
touchStart = touch.pageY; //获取到按下的页面的位置
}, false);
this.outerScroller.addEventListener('touchmove', function (event) {
var touch = event.targetTouches[0];
console.log(touch.pageY, touchStart)
if (_this.inner.scrollHeight - _this.inner.scrollTop <= _this.inner.clientHeight) {
 
_this.scroll.style.top = _this.scroll.offsetTop + touch.pageY - touchStart +
'px'; //页面定位的高度+页面移动点的位置-开始按下的页面位置 scroll.style.top = scroll.offsetTop + touch.pageY-touchStart + 'px'
touchStart = touch.pageY; //将当前的位置赋值给开始移动的位置
} else {
return
}
}, false);
this.outerScroller.addEventListener('touchend', function (event) {
touchStart = 0;
var top = _this.scroll.offsetTop;
if (top < -80) callback && callback();
if (top < 0) {
var time = setInterval(function () {
_this.scroll.style.top = _this.scroll.offsetTop + 2 + 'px';
if (_this.scroll.offsetTop >= 0) {
clearInterval(time);
}
}, 1)
}
}, false);
}
this.load();
}
window.scroll = scroll;
}()
 
var ns = new scroll('.outerScroller', '.scroll', '.inner', function () {
var ul = document.getElementsByTagName('ul')[0];
 
for (var i = 10; i > 0; i--) {
var node = document.createElement("li");
node.innerHTML = "I'm new" + i;
ul.appendChild(node)
}
})
</script>
</body>
</html>

手机端原生js实现下拉刷新数据的更多相关文章

  1. 原生js模仿下拉刷新功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 原生JS实现下拉刷新

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  3. vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  4. javascript+html5+css3下拉刷新 数据效果

    文章摘自:suchso.com/projecteactual/javascript-html5-css3-taobao-xiala-data.html segmentfault.com/a/11900 ...

  5. mui实现分页上拉加载更多 下拉刷新数据的简单实现 移动端下拉上拉

    空下来把mui上拉加载更多,下拉刷新数据做了一个简单的实现,希望可以帮助到需要的朋友 demo项目的结构 <!DOCTYPE html> <html> <head> ...

  6. 完美解决，浏览器下拉显示网址问题 | 完美解决，使用原生 scroll 写下拉刷新

    在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...

  7. 基于iscroll.js实现下拉刷新和上拉加载特效

    现在已经不是纯Android独霸天下的时代了,H5嵌入Android的Hybrid混合开发是大势所趋.今天给大家带来的就是移动端中常见的"上拉刷新,下拉加载"特效,这个特效将会基于 ...

  8. 使用mui.js实现下拉刷新

    闲聊: 最近因公司项目需求,小颖需要写一些html5页面,方便公司IOS和Android给APP中嵌套使用,其中需要实现拉下刷新功能,其实就是调用了一下mui.js就可以啦嘻嘻,下面跟着小颖一起来看看 ...

  9. js的下拉刷新和上拉加载，基于iScroll v4.2.5

    html部分 <div id="wrapper" style="height: 100%"> <div id="scroller&q ...

随机推荐

  1. 一个逼格很低的appium自动化测试框架

    Github地址: https://github.com/wuranxu 使用说明 1. 安装配置Mongo数据库 下载地址 mongo是用来存放元素定位的,截图如下: 通过case_id区分每个ca ...

  2. Go基础之--操作Mysql(二)

    在上一篇文章中主要整理了Golang连接mysql以及一些基本的操作,并进行了大概介绍,这篇文章对增删查改进行详细的整理 读取数据 在上一篇文章中整理查询数据的时候,使用了Query的方法查询,其实d ...

  3. 重新编译Linux内核必要性及其准备工作

    内核简介 内核,是一个操作系统的核心.它负责管理系统的进程.内存.设备驱动程序.文件和网络系统,决定着系统的性能和稳定性. Linux的一个重要的特点就是其源代码的公开性,所有的内核源程序都可以在/u ...

  4. thinkphp中使用phpexcel读取所有的行记录

    ThinkPHP3.2使用phpexcle 将phpexcel放到Think\Org\PHPExcel中 public function index() { import('Org.PHPExcel. ...

  5. json_encode处理json数据中文乱码

    今天使用json_encode 把一个数组转换成json数据,echo处理的时候,显示为null.去查了php手册. 该函数只能接受 UTF-8 编码的数据. 在网上搜了下,找到了解决方法. < ...

  6. printk优先级

    printk是在内核中运行的向控制台输出显示的函数,Linux内核首先在内核空间分配一个静态缓冲区,作为显示用的空间,然后调用sprintf,格式化显示字符串,最后调用tty_write向终端进行信息 ...

  7. TypeError: Error #1034: 强制转换类型失败:无法将 flash.events::MouseEvent@73b7cc1 转换为 mx.events.ItemClickEvent。

    1.错误描述 TypeError: Error #1034: 强制转换类型失败:无法将 flash.events::MouseEvent@73b7cc1 转换为 mx.events.ItemClick ...

  8. 让微信，qq，uc浏览器使用全屏模式，全屏模式里，浏览器是不会上下左右滑动出现背景的

    <meta name="x5-fullscreen" content="true"> <meta name="full-screen ...

  9. CF367 E - Working routine

    十字链表模拟 #include<bits/stdc++.h> using namespace std; int n,m,q; struct Node{ int v; int d,r; }m ...

  10. 【BZOJ4556】字符串（后缀数组，主席树）

    [BZOJ4556]字符串(后缀数组,主席树) 题面 BZOJ 题解 注意看题: 要求的是\([a,b]\)的子串和[c,d]的\(lcp\)的最大值 先来一下暴力吧 求出\(SA\)之后 暴力枚举\ ...