当前位置：首页 > JavaScript

js 实现div滚动

2026-03-01 06:20:00JavaScript

实现 div 滚动的方法

方法一：使用 CSS 的 overflow 属性

在 CSS 中为 div 设置 overflow: auto 或 overflow: scroll，当内容超出 div 高度时会自动显示滚动条。

.scrollable-div {
  height: 200px;
  overflow: auto;
  border: 1px solid #ccc;
}

<div class="scrollable-div">
  <!-- 长内容 -->
</div>

方法二：使用 JavaScript 控制滚动

通过 JavaScript 动态控制 div 的滚动行为，例如滚动到指定位置或平滑滚动。

const div = document.getElementById('scrollableDiv');

// 滚动到顶部
div.scrollTop = 0;

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

// 平滑滚动到底部
div.scrollTo({
  top: div.scrollHeight,
  behavior: 'smooth'
});

方法三：监听滚动事件

通过 JavaScript 监听 div 的滚动事件，实现自定义滚动逻辑。

const div = document.getElementById('scrollableDiv');

div.addEventListener('scroll', function() {
  console.log('当前滚动位置:', div.scrollTop);
});

方法四：自定义滚动条

使用第三方库（如 perfect-scrollbar）或自定义 CSS 样式美化滚动条。

.scrollable-div::-webkit-scrollbar {
  width: 8px;
}

.scrollable-div::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

方法五：动态加载内容

结合 AJAX 或 Fetch API，在滚动到底部时动态加载更多内容。

const div = document.getElementById('scrollableDiv');

div.addEventListener('scroll', function() {
  if (div.scrollTop + div.clientHeight >= div.scrollHeight - 10) {
    loadMoreContent();
  }
});

function loadMoreContent() {
  // 加载更多内容的逻辑
}