コードは非常にシンプルですが、実装された関数は非常に実用的です
CSS：
コードコピーは次のとおりです。
<Meta charset = "utf-8" />
<Title>プルを更新する</title>
<Meta name = "Viewport" content = "width、height = device-height、inital-scale = 1.0、最大スケール= 1.0、ユーザースケーラブル= no;"
<style>
div {
位置：絶対;
上：0px;
下：0px;
幅：100％;
左：0px;
オーバーフロー：隠し;
}
li {
リストスタイルタイプ：なし;
高さ：35px;
背景：#ccc;
境界線：ソリッド1px #fff;
テキストアライグ：左;
ラインハイト：35px;
パディング左：15px;
}
ul {
幅：100％;
マージントップ：0px;
位置：絶対;
左：0px;
パディング：0px;
上：0px;
}
</style>
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>
<スクリプト>
var scroll = document.queryselector（ '。スクロール'）;
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）{
touchstart = 0;
var top = scroll.offsettop;
console.log（top）;
if（top> 70）refresh（）;
if（top> 0）{
var time = setInterval（function（）{
scroll.style.top = scroll.offsettop -2+'px';
if（scroll.offsettop <= 0）clearinterval（time）;
}、1）
}
}、 間違い）;
function refresh（）{
for（var i = 10; i> 0; i--）
{
var node = document.createelement（ "li"）;
node.innerhtml = "I'm New";
scroll.insertbefore（node、scroll.firstchild）;
}
}
</script>
上記は、この記事についてのすべてです。