当前位置：首页 > JavaScript

js实现div自动滚动

2026-04-04 11:21:47JavaScript

实现div自动滚动的方法

使用CSS动画实现平滑滚动

通过CSS的animation和transform属性可以实现平滑的滚动效果。

.scroll-container {
  overflow: hidden;
  height: 200px;
}

.scroll-content {
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

使用JavaScript的scrollTop属性

通过定时器不断修改元素的scrollTop值实现滚动。

function autoScroll(element, speed) {
  let scrollInterval = setInterval(() => {
    if(element.scrollTop >= element.scrollHeight - element.clientHeight) {
      element.scrollTop = 0;
    } else {
      element.scrollTop += 1;
    }
  }, speed);
}

// 使用示例
const div = document.getElementById('scroll-div');
autoScroll(div, 30);

使用requestAnimationFrame实现高性能滚动

这种方法比setInterval更流畅，适合高性能要求的场景。

function smoothScroll(element, duration) {
  const start = element.scrollTop;
  const distance = element.scrollHeight - element.clientHeight;
  let startTime = null;

  function animation(currentTime) {
    if(!startTime) startTime = currentTime;
    const timeElapsed = currentTime - startTime;
    const run = ease(timeElapsed, start, distance, duration);
    element.scrollTop = run;
    if(timeElapsed < duration) requestAnimationFrame(animation);
  }

  function ease(t, b, c, d) {
    t /= d;
    return c * t * t + b;
  }

  requestAnimationFrame(animation);
}

实现无限循环滚动

当内容滚动到底部时无缝回到顶部。

function infiniteScroll(container, content, speed) {
  let clone = content.cloneNode(true);
  container.appendChild(clone);

  let scrollPos = 0;
  function scroll() {
    scrollPos++;
    if(scrollPos >= content.offsetHeight) {
      scrollPos = 0;
    }
    container.scrollTop = scrollPos;
    requestAnimationFrame(scroll);
  }

  scroll();
}

响应式滚动控制

添加鼠标悬停暂停功能，提升用户体验。

js实现div自动滚动

const scrollDiv = document.getElementById('scroll-div');
let isScrolling = true;
let scrollInterval;

function startScroll() {
  scrollInterval = setInterval(() => {
    if(isScrolling) {
      scrollDiv.scrollTop += 1;
      if(scrollDiv.scrollTop >= scrollDiv.scrollHeight - scrollDiv.clientHeight) {
        scrollDiv.scrollTop = 0;
      }
    }
  }, 30);
}

scrollDiv.addEventListener('mouseenter', () => { isScrolling = false; });
scrollDiv.addEventListener('mouseleave', () => { isScrolling = true; });

startScroll();