iT邦幫忙

0

如何透過 js 判斷滾動到底部時,就添加新的標籤到後面?

AWEI 2021-10-28 00:10:361094 瀏覽

大家好,我是 javascript 初學者!
目前有個專案是這樣的,我希望可以透過 javaScript 在網頁滾動到底部時,自動添加 5 組 HTML

例如增加五組這串 HTML

但我上網找了資料還是不知道該如何撰寫,因此來尋問大家~謝謝大家。

我的程式碼

迷路 iT邦新手 5 級 ‧ 2021-10-28 08:10:42 檢舉
是要「滑動載入」「滾動載入」這樣的效果嗎?
類似這篇的效果?
https://www.zendei.com/article/16169.html
1
froce
iT邦大師 1 級 ‧ 2021-10-28 07:59:23

改成這樣你應該就能看到123有印出來了,剩下自己寫。

function addDemo(){
   if(contain.scrollHeight - contain.scrollTop === contain.clientHeight){
     console.log('123')
     // demo.appendChild(str);
   }
}
3
通靈亡
iT邦研究生 1 級 ‧ 2021-10-28 08:35:34

https://codepen.io/ted59438/pen/MWvopYG?editors=1111

  1. 這個範例不能用 contain 元素的 scroll ,要改用 docment.documentElement 的 scroll
    (觀察下面的 console 會知道原因,scroll 卷軸不是長在 contain 元素上面)
  2. 一般會在接近快底部的時候載入新的 DOM,不會到剛好底部的時候才載入
  3. 如果要以字串的方式新增 DOM 節點,可以使用 dom.insertAdjacentHTML('beforeend', str)
let demo = document.querySelector('.demo');
let contain = document.querySelector('#contain');
let str = `<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>`;

function addDemo() {
   let documentElement = document.documentElement
   
   console.log(contain.scrollTop)
   console.log(documentElement.scrollTop)
   
   if (documentElement.scrollTop + 10 >= documentElement.scrollHeight - documentElement.clientHeight) {
     console.log('123')
     
     for (let i = 0; i < 20; i++) {
        contain.insertAdjacentHTML('beforeend', str)
     }
   }
}

window.addEventListener('scroll', addDemo);
AWEI iT邦新手 5 級 ‧ 2021-10-29 00:37:20 檢舉

您好~我使用了個的範例為了便於觀察新增的區塊,我把新增的區塊加上紅色樣式,但是感覺很奇怪的是,當往下滾動到快底部時為什麼新增的區塊不是從最後一個 HTML 節點長出來,而是好像從頂部長出來呢?

https://codepen.io/hong-wei/pen/bGrRZvV?editors=1010

通靈亡 iT邦研究生 1 級 ‧ 2021-10-29 07:29:14 檢舉

AWEI 改成加在 contain 就可以了~
因為原本你的程式碼是加在第一個 demo 元素底下造成的。

contain.insertAdjacentHTML('beforeend', str)
0
Felix
iT邦新手 4 級 ‧ 2021-10-29 06:10:09

不是從底部新增元素的原因:
因為 document.querySelector('.demo') 抓到的是第一個 .demo 元素,但是這次不會用到這一句。

試試看下方的程式碼吧,這應該就是你想要的結果!

let container = document.querySelector('#contain');
let str = '<div class="demo red">Lorem ipsum dolor sit amet consectetur.</div>';

window.addEventListener('scroll', addDemo);

function addDemo() {
    /* 不是底部則跳出函式 */
    if (window.pageYOffset + window.innerHeight < document.documentElement.offsetHeight) return; 

    for (let i = 0; i < 5; i++) {
        container.insertAdjacentHTML('beforeend', str)
    }
}

我要發表回答

立即登入回答