200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > 原生js实现下拉刷新 下拉刷新 刷新页面

原生js实现下拉刷新 下拉刷新 刷新页面

时间:2021-07-03 03:57:40

相关推荐

原生js实现下拉刷新 下拉刷新 刷新页面

js部分:

$(function() {

var scroll = document.querySelector('.scrolmain');

var outerScroller = document.querySelector('.main-inner');

var touchstart = 0

// 触摸开始

outerScroller.addEventListener('touchstart', function(event) {

var touch = event.targetTouches[0];

touchstart = touch.pageY

}, false);

// 手指移动中记录移动位置

outerScroller.addEventListener('touchmove', function(event) {

var touch = event.targetTouches[0];

if(touch.pageY <= 500) {

outerScroller.style.top = touch.pageY - touchstart + 'px';

}

}, false);

// 手指松开回弹

outerScroller.addEventListener('touchend', function(event) {

var top = scroll.offsetTop;

console.log(top)

if(top > 80) 回调函数;

if(top > 0) {

var time = setInterval(function() {

outerScroller.style.top = outerScroller.offsetTop - 4 + 'px';

if(outerScroller.offsetTop <= 0) clearInterval(time);

}, 1)

}

}, false);

})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。