js div内容滚动显示

<div id="scrollableDiv" style="width: 300px; height: 200px; overflow-y: auto;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
    <!-- 更多内容 -->
</div>

#scrollableDiv {
    border: 1px solid #ccc;
    padding: 10px;
}

// 动态添加内容并触发滚动
function addContent() {
    const div = document.getElementById('scrollableDiv');
    for (let i = 0; i < 50; i++) {
        const p = document.createElement('p');
        p.textContent = `这是第 ${i + 1} 行内容。`;
        div.appendChild(p);
    }
    div.scrollTop = div.scrollHeight; // 滚动到底部
}

window.onload = addContent;

#scrollableDiv {
    width: 300px;
    height: 200px;
    overflow-y: auto; /* 确保设置为auto或scroll */
}

div.scrollTop = div.scrollHeight; // 确保滚动条滚动到底部

div.addEventListener('scroll', () => {
    requestAnimationFrame(() => {
        // 处理滚动事件
    });
});