如何设置元素默认始终滚动至最大位置，添加新元素时自动保持？

首先明确：目前CSS并没有default-scroll:max这样的原生属性，你示例中的代码无法直接生效。下面是几种实际可行的实现方案：

方法1：添加新元素后手动触发滚动 #

每次向目标元素添加内容后，通过JS直接将滚动位置设置为最大值：

const elmnt = document.getElementById('elmnt');
// 这里插入添加新元素的代码
elmnt.scrollTop = elmnt.scrollHeight;
// 如需平滑滚动，可改用scrollTo方法
elmnt.scrollTo({
  top: elmnt.scrollHeight,
  behavior: 'smooth' // 可选，开启平滑滚动效果
});

方法2：用MutationObserver自动监听内容变化 #

如果不想每次添加元素都手动调用滚动逻辑，可以通过MutationObserver监听元素的内容变化，自动触发滚动：

const elmnt = document.getElementById('elmnt');
const observer = new MutationObserver(() => {
  elmnt.scrollTop = elmnt.scrollHeight;
});

// 配置监听规则：监听子节点变化、子树内容变化
observer.observe(elmnt, {
  childList: true,
  subtree: true
});

// 后续不需要监听时可执行断开操作
// observer.disconnect();

方法3：CSS配合JS实现初始滚动（仅针对页面加载阶段） #

如果只需要元素在初始加载时滚动到底，可以用CSS设置滚动行为，再配合JS初始化触发：

#elmnt {
  overflow-y: auto;
  scroll-behavior: smooth; /* 可选，开启平滑滚动 */
}

window.addEventListener('load', () => {
  const elmnt = document.getElementById('elmnt');
  elmnt.scrollTop = elmnt.scrollHeight;
});

内容的提问来源于stack exchange，提问作者mnwer