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

javascript jquery css

AWEI 2021-10-28 00:10:36 ‧ 2691 瀏覽

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

例如增加五組這串 HTML

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

我的程式碼

迷路 iT邦新手 2 級 ‧ 2021-10-28 08:10:42 檢舉

是要「滑動載入」「滾動載入」這樣的效果嗎?
類似這篇的效果?
https://www.zendei.com/article/16169.html

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

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);
   }
}

回應
分享
檢舉

登入發表回應

通靈亡

iT邦高手 1 級 ‧ 2021-10-28 08:35:34

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

這個範例不能用 contain 元素的 scroll ，要改用 docment.documentElement 的 scroll
(觀察下面的 console 會知道原因，scroll 卷軸不是長在 contain 元素上面)
一般會在接近快底部的時候載入新的 DOM，不會到剛好底部的時候才載入
如果要以字串的方式新增 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);

回應 2
分享
檢舉

AWEI iT邦新手 4 級 ‧ 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)

登入發表回應

Felix

iT邦研究生 2 級 ‧ 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)
    }
}