الكود بسيط للغاية ، لكن الوظائف المنفذة عملية للغاية. فقط قدم الرمز
CSS:
نسخة الكود كما يلي:
<meta charset = "utf-8" />
<title> سحب إلى تحديث </title>
<meta name = "viewport" content = "width = width device ، height = evice-height ، inital-scale = 1.0 ، maximum scale = 1.0 ، ster-scalable = no ؛" />
<style>
ديف {
الموقف: مطلق ؛
أعلى: 0px ؛
أسفل: 0px ؛
العرض: 100 ٪ ؛
اليسار: 0px ؛
الفائض: مخفي.
}
لي {
نوع القائمة: لا شيء ؛
الارتفاع: 35 بكسل ؛
الخلفية: #CCC ؛
Border-Bottom: Solid 1PX #FFF ؛
محاذاة النص: اليسار ؛
ارتفاع الخط: 35 بكسل ؛
حشو اليسار: 15 بكسل ؛
}
ul {
العرض: 100 ٪ ؛
الهامش: 0px ؛
الموقف: مطلق ؛
اليسار: 0px ؛
الحشو: 0px ؛
أعلى: 0px ؛
}
</style>
HTML:
نسخة الكود كما يلي:
<viv>
<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>
<script>
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' ، وظيفة (الحدث) {
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> 70) Refresh () ؛
if (top> 0) {
var time = setInterval (function () {
scroll.style.top = scroll.offsettop -2+'px' ؛
if (scroll.offsettop <= 0) clearinterval (time) ؛
} ، 1)
}
}، خطأ شنيع)؛
وظيفة Refresh () {
لـ (var i = 10 ؛ i> 0 ؛ i--)
{
var node = document.createElement ("li") ؛
node.innerhtml = "أنا جديد" ؛
scroll.insertbefore (العقدة ، scroll.firstchild) ؛
}
}
</script>
ما سبق هو كل شيء عن هذا المقال. آمل أن يكون من المفيد للجميع أن يتعلموا جافا سكريبت.