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

最新推荐文章于 2024-08-22 20:35:58 发布

爱吃肉的栗子

最新推荐文章于 2024-08-22 20:35:58 发布

阅读量6.2k

点赞数 1

分类专栏： javascript 文章标签： scroll

本文链接：https://blog.csdn.net/qq_39588818/article/details/83715993

版权

javascript 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

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);
})