CSS 如何使 div 可滚动 - JavaScript

在网页中，可能会出现一个 div 内容过多的情况，导致页面内容不够美观。这时，我们可以使用 CSS 和 JavaScript 来让 div 具有滚动效果，使页面更加美观整洁。

CSS 样式

首先，我们需要使用 CSS 样式来让 div 具有滚动效果。我们可以使用以下样式：

div {
  max-height: 200px; /* 设置 div 最大高度 */
  overflow: auto; /* 让 div 具有滚动条 */
}

使用该样式后，当 div 内容超过 200px 时，div 会自动添加垂直滚动条，使页面具有滚动效果。

JavaScript

如果需要通过 JavaScript 来实现滚动效果，我们可以使用以下代码片段：

const div = document.querySelector('div'); // 获取 div 元素
div.scrollTop = div.scrollHeight; // 将 div 滚动到底部

使用该代码片段可以将 div 滚动到底部。我们可以将该代码片段封装成一个函数，方便使用：

function scrollToBottom(element) {
  element.scrollTop = element.scrollHeight; // 滚动到底部
}

总结

通过 CSS 样式和 JavaScript，我们可以为 div 添加滚动效果，使页面更加美观，用户体验更佳。