순수 자바스크립트는 간단한 풀다운 새로 고침 function_javascript 기술을 구현합니다.

코드는 매우 간단하지만 구현된 기능은 매우 실용적입니다.

CSS:

코드 복사 코드는 다음과 같습니다.

div{
위치: 절대;
상단:0px;
하단:0px;
너비:100%;
왼쪽:0px;
오버플로: 숨김;
}
리{
목록 스타일 유형: 없음;
높이:35px;
배경: #ccc;
테두리 하단: 단색 1px #fff;
텍스트 정렬: 왼쪽;
줄 높이: 35px;
​ padding-left:15px;
}
ul{
너비:100%;
​ margin-top:0px;
위치: 절대;
왼쪽:0px;
​ 패딩:0px;
상단:0px;
}

HTML:

코드 복사 코드는 다음과 같습니다.

   

       

1

       

2

       

3

       

4

       

5

       

6

       

7

       

8

       

9

       

10

        

1

       

2

       

3

       

4

       

5

       

6

       

7

       

8

       

9

       

10

   

   var 스크롤 = document.querySelector('.scroll');
   var externalScroller = document.querySelector('.outerScroller');
   var touchStart = 0;
   var touchDis = 0;
   externalScroller.addEventListener('touchstart', function(event) {
        var touch = event.targetTouches[0];
        // 把元素放는 手指所의 位置
           touchStart = touch.pageY;
           console.log(touchStart);
        }, 거짓);
   externalScroller.addEventListener('touchmove', function(event) {
        var touch = event.targetTouches[0];
        console.log(touch.pageY 'px'); 
        scroll.style.top = scroll.offsetTop touch.pageY-touchStart 'px';
        console.log(scroll.style.top);
        touchStart = touch.pageY;
        touchDis = touch.pageY-touchStart;
        }, 거짓);
   externalScroller.addEventListener('touchend', function(event) {
        touchStart = 0;
        var top = scroll.offsetTop;
        console.log(상단);
        if(top>70)refresh();
        if(상위>0){
            var time = setInterval(function(){
              scroll.style.top = scroll.offsetTop -2 'px';
              if(scroll.offsetTop<=0)clearInterval(time);
            },1)
        }
    }, 거짓);
   함수 새로 고침(){
    for(var i = 10;i>0;i--)
        {
            var node = document.createElement("li");
            node.innerHTML = "저는 처음이에요";
            scroll.insertBefore(node,scroll.firstChild);
        }
   }

이상 내용이 이 글의 전체 내용입니다. 자바스크립트를 배우시는 모든 분들께 도움이 되었으면 좋겠습니다.