在JavaScript中如何实现元素滚动条循环追加内容
下面我就为大家分享一篇JavaScript实现元素滚动条到达一定位置循环追加内容，具有很好的参考价值，希望对大家有所帮助
如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background-color: #eee;
}
#contents{
margin:30px auto;
width: 960px;
height:300px;
overflow:auto;
}
#list{
margin: 0;
padding: 0;
}
#list li{
color:#666;
list-style-type: none;
background-color: #ddd;
margin: 0;
margin-top:10px;
border-bottom: solid 1px #999;
text-align: center;
height:30px;
}
</style>
<script type="text/javascript">
//获取列表中的原有内容
window.onload=function(){
var contents=document.getElementById("list").innerHTML;
//每被调用一次，就将网页原有内容添加一份，这个大家可以写自己要加载的内容或指令
function appendcontent(){
document.getElementById("list").innerHTML+=contents;
}
document.getElementById("contents").onscroll=function(){
//content实际高度，
var contentscrollHeight=document.getElementById("contents").scrollHeight;
//contentclientHeight可视区高度，
var contentclientHeight=document.getElementById("contents").offsetHeight;
//滚动条距顶部高度
var contentscrollTop=document.getElementById("contents").scrollTop;
//通过判断滚动条的距离底部位置判断手否加载内容
var height=contentclientHeight+100;
if(contentscrollTop+height>=contentscrollHeight){
if(document.getElementById("list").childNodes.length>=150){
if(document.getElementById("nodata")){
}else{
var nodata=document.createElement("p");
nodata.id="nodata";
nodata.style.height="50px";
nodata.style.textAlign="center";
nodata.style.lineHeight="50px";
nodata.style.borderTop="1px solid #eee";
nodata.innerHTML="我是有底线的";
nodata.style.backgroundColor="#fff";
document.getElementById("list").appendChild(nodata);
}
console.log(document.getElementById("list").childNodes.length)
return;
}else{
appendcontent();
}
}
};
}
</script>
</head>
<body>
<p id="contents">
<ul id="list">
<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>
</p>
</body>
</html>上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Atas ialah kandungan terperinci 在JavaScript中如何实现元素滚动条循环追加内容. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Laluan permulaan Win11 dan cara membukanya
Jan 03, 2024 pm 11:13 PM
Setiap sistem Windows mempunyai laluan permulaan Jika anda menambah fail atau perisian padanya, ia akan dibuka pada masa but. Walau bagaimanapun, ramai rakan tidak tahu di mana laluan permulaan win11 sebenarnya, kita hanya perlu memasukkan folder yang sepadan pada pemacu C. Laluan permulaan Win11: 1. Klik dua kali untuk membuka "PC ini" 2. Tampal terus laluan "C:\ProgramData\Microsoft\Windows\StartMenu\Programs\Startup" ke dalam kotak laluan. 3. Berikut ialah laluan permulaan win11 Jika kita ingin membuka fail selepas boot, kita boleh memasukkan fail tersebut. 4. Jika anda tidak boleh masuk mengikut laluan ini, ia mungkin tersembunyi.
Fahami lokasi dan struktur penyimpanan pakej pemasangan pip
Jan 18, 2024 am 08:23 AM
Untuk mengetahui lebih lanjut tentang lokasi storan pakej yang dipasang oleh pip, anda memerlukan contoh kod khusus Pip ialah alat pengurusan pakej yang biasa digunakan dalam bahasa Python Ia digunakan untuk memasang, meningkatkan dan mengurus pakej Python dengan mudah. Apabila menggunakan pip untuk memasang pakej, ia akan memuat turun fail pakej yang sepadan secara automatik daripada PyPI (Python Package Index) dan memasangnya ke lokasi yang ditentukan. Jadi, di manakah pakej yang dipasang oleh pip disimpan? Ini adalah masalah yang akan dihadapi oleh ramai pembangun Python. Artikel ini akan menyelidiki lokasi pakej yang dipasang oleh pip dan menyediakan
Di manakah Kuaishou diterbitkan dan bagaimana untuk menukar lokasinya? Bagaimana untuk menambah lokasi pada video yang telah dimuat naik?
Mar 21, 2024 pm 06:00 PM
Sebagai platform video pendek yang terkenal di China, Kuaishou menyediakan banyak pencipta peluang untuk mempamerkan bakat mereka dan berkongsi kehidupan mereka. Semasa memuat naik video, sesetengah pencipta pemula mungkin keliru tentang cara menukar lokasi siaran video. Artikel ini akan memperkenalkan anda tentang cara menukar lokasi penerbitan video Kuaishou dan berkongsi beberapa petua untuk penerbitan video Kuaishou untuk membantu anda menggunakan platform ini dengan lebih baik untuk mempamerkan hasil kerja anda. 1. Di manakah Kuaishou diterbitkan dan bagaimana untuk menukar lokasinya? 1. Antara muka penerbitan: Dalam Kuaishou APP, klik butang "Terbitkan" untuk memasuki antara muka penerbitan video. 2. Maklumat lokasi: Dalam antara muka penerbitan, terdapat lajur "Lokasi" Klik untuk memasuki antara muka pemilihan lokasi. 3. Tukar lokasi: Dalam antara muka pemilihan lokasi, klik butang "Lokasi" untuk melihat lokasi semasa. Jika anda ingin menukar lokasi, klik "Lokasi"
Lokasi Burung Origami di Taman Filem dan Televisyen Stardome Railway Crocker
Mar 27, 2024 pm 11:51 PM
Terdapat sejumlah 20 burung origami di Taman Filem dan Televisyen Croaker di Star Dome Railway Ramai pemain tidak tahu di mana burung origami berada di Taman Filem dan Televisyen Crocker. Editor telah meringkaskan lokasi setiap burung origami untuk membantu semua orang . Carinya, dan lihat ringkasan terkini lokasi burung origami di Taman Filem dan Televisyen Croaker untuk kandungan tertentu. Panduan ke Kereta Api Kubah Bintang Honkai: Burung Origami di Crook Movie Park Lokasi 1, Crook Movie Park Tingkat 1 2 dan Crook Movie Park Tingkat 2 Star Dome Railway
Cara menukar lokasi Rumah Peta Gaode
Feb 27, 2024 pm 07:31 PM
Sebagai pembantu yang berkuasa untuk perjalanan harian kami, Amap bukan sahaja menyediakan perkhidmatan navigasi yang tepat, tetapi juga membenarkan pengguna menentukan "lokasi rumah" mereka secara langsung dengan cara yang mesra pengguna. Adalah mudah untuk menyemak laluan pulang anda setiap kali. Tetapi kadangkala lokasi rumah kita juga perlu dikemas kini, jadi bagaimana kita boleh mengubah suai "lokasi rumah" dengan mudah di Amap Seterusnya, ikuti panduan editor dan pelajari cara mengubahnya bersama-sama! rumah? Jawapan: [AMAP] - [Tetapan] - [Ikon tiga titik] - [Ubah suai lokasi] - [Tetapkan lokasi] - [Tetapkan sebagai alamat rumah]. Langkah-langkah khusus: 1. Mula-mula buka perisian Amap, masukkan halaman utama, slaid ke atas, cari rumah dan klik [Tetapan] 2. Kemudian dalam halaman tetapan, kita boleh;
Di manakah lokasi Baucar Harian Meituan_Pengenalan lokasi Baucar Harian Meituan
Mar 27, 2024 pm 05:11 PM
1. Kami membuka Meituan pada telefon mudah alih, dan kemudian klik pada pilihan bawa pulang di penjuru kiri sebelah atas halaman utama. 2. Selepas memasuki halaman platform bawa pulang, anda boleh melihat bahagian dengan kupon harian di halaman utama, klik padanya terus. 3. Selepas memasuki Tiantian God Voucher, anda akan melihat banyak aktiviti, klik Selesai, dan kemudian kita boleh mendapat ganjaran selepas menyelesaikan tugasan.
Di manakah terletaknya Arena Era Terakhir?
Mar 07, 2024 pm 08:16 PM
Dalam "Zaman Terakhir", pemain boleh bermain dalam pelbagai mod seperti mod permainan, mod cabaran dan arena, dsb. Arena ialah cara terbaik untuk bermain permainan, menyediakan dua mod untuk dipilih oleh pemain. Di manakah Arena di Era Terakhir Jawapan: Arena ialah permainan akhir, dan lokasi khususnya adalah di Gerbang Juara. Anda perlu mendapatkan Kunci Arena atau Kunci Arena Memori Selepas mengklik kanan, anda boleh melihat peta dunia dan mencari lokasi khusus Gerbang Juara. Arena ini dibahagikan kepada dua mod utama: Mod Kejuaraan Arena dan Mod Arena Tanpa Kesudahan. Yang pertama termasuk 40 gelombang musuh dan ganjaran terpilih, sentiasa memuncak dalam pertempuran dengan Juara Arena. Terdapat 4 peringkat dalam Mod Kejuaraan Arena Lebih tinggi kesukaran, lebih baik ganjarannya. Arena Endless ialah mod dengan ombak tak terhingga Kesukaran secara beransur-ansur meningkat
lokasi penutupan win11
Jan 10, 2024 am 09:14 AM
Jika kita akan berada jauh dari komputer untuk masa yang lama, adalah lebih baik untuk menutup komputer untuk melindunginya Jadi di manakah penutupan dalam win11 Sebenarnya, secara umum, buka menu mula dan anda boleh mencari butang tutup di dalamnya. Di mana untuk menutup Windows 11: Jawapan: Dalam butang kuasa menu mula. 1. Mula-mula, kami klik "Logo Windows" pada bar tugas bawah untuk membuka "Menu Mula" 2. Selepas membuka, anda boleh mencari butang "Kuasa" di sudut kanan bawah, seperti yang ditunjukkan dalam rajah. 3. Selepas mengklik butang kuasa, anda akan melihat "Shutdown", klik padanya untuk menutup. 4. Jika komputer tidak dapat dimatikan disebabkan oleh keadaan khusus seperti ranap sistem, anda boleh terus menekan dan menahan "butang kuasa" pada komputer untuk menutup paksa.
