当前位置：首页 > JavaScript

js 实现div滚动

2026-01-30 15:16:07JavaScript

实现 Div 滚动的方法

使用 CSS 控制滚动

通过 CSS 的 overflow 属性可以轻松实现 Div 的滚动效果。将 overflow 设置为 auto 或 scroll，当内容超出容器时自动显示滚动条。

.scrollable-div {
  width: 300px;
  height: 200px;
  overflow: auto; /* 或 overflow: scroll */
}

<div class="scrollable-div">
  <!-- 内容超出容器高度时会显示滚动条 -->
</div>

使用 JavaScript 控制滚动行为

如果需要通过 JavaScript 动态控制滚动位置，可以使用 scrollTop 或 scrollTo 方法。

js 实现div滚动

const div = document.querySelector('.scrollable-div');

// 滚动到指定位置（像素）
div.scrollTop = 100;

// 平滑滚动到指定位置
div.scrollTo({
  top: 100,
  behavior: 'smooth'
});

监听滚动事件

可以通过监听 scroll 事件来响应滚动行为，例如实现无限滚动或动态加载内容。

js 实现div滚动

const div = document.querySelector('.scrollable-div');

div.addEventListener('scroll', () => {
  if (div.scrollTop + div.clientHeight >= div.scrollHeight - 10) {
    console.log('已滚动到底部');
  }
});

自定义滚动条样式

如果需要美化滚动条，可以通过 CSS 伪类 ::-webkit-scrollbar 实现（仅限 WebKit 内核浏览器）。

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

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

使用第三方库

对于更复杂的滚动需求（如平滑滚动、滚动动画），可以使用第三方库如 smooth-scrollbar 或 perfect-scrollbar。

import SmoothScrollbar from 'smooth-scrollbar';

const scrollbar = SmoothScrollbar.init(document.querySelector('.scrollable-div'));
scrollbar.scrollTo(0, 100, 1000); // 在 1000ms 内滚动到 (0, 100)

以上方法涵盖了从基础到高级的 Div 滚动实现方式，可根据具体需求选择合适的方法。