코드는 매우 간단하지만 구현 된 기능은 매우 실용적입니다. 코드를 제시하십시오
CSS :
코드 사본은 다음과 같습니다.
<meta charset = "utf-8" />
<title> 새로 고침 </title>
<meta name = "viewport"content = "width = device-width, height = device-height, inital-scale = 1.0, 최대 규모 = 1.0, 사용자-규모 = 아니오;" />
<스타일>
div {
위치 : 절대;
상단 : 0px;
하단 : 0px;
너비 : 100%;
왼쪽 : 0px;
오버플로 : 숨겨진;
}
Li {
목록 스타일 유형 : 없음;
높이 : 35px;
배경 : #CCC;
국경-바닥 : 단단한 1px #fff;
텍스트 정렬 : 왼쪽;
라인 높이 : 35px;
왼쪽 패딩 : 15px;
}
ul {
너비 : 100%;
마진-탑 : 0px;
위치 : 절대;
왼쪽 : 0px;
패딩 : 0px;
상단 : 0px;
}
</스타일>
HTML :
코드 사본은 다음과 같습니다.
<div>
<ul class = 'scroll'>
<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>
<cript>
var scroll = document.querySelector ( '. scroll');
var outerscroller = document.querySelector ( '. outerscroller');
var touchStart = 0;
var touchdis = 0;
outerscroller.addeventListener ( 'touchstart', function (event) {
var touch = event.targetTouches [0];
// 손가락이있는 곳에 요소를 넣습니다
touchStart = touch.pagey;
Console.log (TouchStart);
}, 거짓);
outerscroller.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;
}, 거짓);
outerscroller.addeventListener ( 'touchend', function (event) {
터치 스타트 = 0;
var top = scroll.offsettop;
Console.log (상단);
if (상단> 70) 새로 고침 ();
if (상단> 0) {
var time = setInterval (function () {
scroll.style.top = scroll.offsettop -2+'px';
if (scroll.offsetTop <= 0) clearInterVal (시간);
}, 1)
}
}, 거짓);
기능 새로 고침 () {
for (var i = 10; i> 0; i-)
{
var node = document.createElement ( "li");
node.innerhtml = "I 'm new";
scroll.insertbefore (Node, Scroll.FirstChild);
}
}
</스크립트>
위는이 기사에 관한 것입니다. 모든 사람이 JavaScript를 배우는 것이 도움이되기를 바랍니다.