JavaScript scroll方法失效：如何实现与style.left一致的轮播效果？

我通过修改slider元素的style.left属性实现了轮播功能，代码运行正常。但尝试使用scroll方法实现相同效果时，该方法失效且无任何报错信息。请告知如何正确使用scroll方法达成同样的轮播效果。

原正常实现代码 #

HTML #

<body>
  <div class="wrapper">
    <div id="prev">
      <i class="fa-solid fa-caret-left"></i>
    </div>
    <div class="slider">
      <div class="slide" style="background-image: url(./img1.jpg)">
        SLIDE 1
      </div>
      <div class="slide" style="background-image: url(./img2.jpg)">
        SLIDE 2
      </div>
      <div class="slide" style="background-image: url(./img4.jpg)">
        SLIDE 3
      </div>
      <div class="slide" style="background-image: url(./img5.jpg)">
        SLIDE 4
      </div>
    </div>
    <div id="next">
      <i class="fa-solid fa-caret-right"></i>
    </div>
  </div>
</body>
<script src="https://kit.fontawesome.com/66df44010b.js" crossorigin="anonymous"></script>

CSS #

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
  border: 0;
  margin: 0;
  padding: 0;
  outline: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

body {
  background-color: #333;
  min-height: 100vh;
  width: 100%;
  font-size: 12px;
  font-family: 'Poppins';
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper {
  width: 800px;
  height: 400px;
  border: 1px solid #777;
  position: relative;
  overflow: hidden;
}

#prev,
#next {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eee;
  border-radius: 100%;
  font-size: 18px;
  cursor: pointer;
  z-index: 999;
  position: absolute;
  top: calc(50% - 15px);
}

#prev {
  left: 15px;
}

#next {
  right: 15px;
}

.slider {
  width: fit-content;
  display: flex;
  height: 400px;
  position: relative;
  left: 0;
  transition: 0.5s all ease;
}

.slide {
  width: 800px;
  height: 400px;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 36px;
  font-weight: bold;
}

JavaScript #

let counter = 0
const prev = document.querySelector('#prev')
const next = document.querySelector('#next')
const slider = document.querySelector('.slider')
const wrapper = document.querySelector('.wrapper')
const max = document.querySelectorAll('.slide').length - 1

function sliderFunc() {
  if (counter < max) {
    counter++
    console.log(counter)
    slider.style.left = '-' + 800 * counter + 'px'
  } else {
    counter = 0
    slider.style.left = '-' + 800 * counter + 'px'
  }
}

let timer = setInterval(sliderFunc, 3000)

wrapper.addEventListener('mouseover', () => {
  clearInterval(timer)
  console.log('鼠标悬停')
})
wrapper.addEventListener('mouseout', () => {
  timer = setInterval(sliderFunc, 3000)
  console.log('鼠标离开')
})

next.addEventListener('click', sliderFunc)

prev.addEventListener('click', () => {
  if (counter > 0) {
    counter--
    console.log(counter)
    slider.style.left = '-' + 800 * counter + 'px'
  }
})

尝试scroll方法的代码 #

JavaScript #

let counter = 0
const prev = document.querySelector('#prev')
const next = document.querySelector('#next')
const slider = document.querySelector('.slider')
const wrapper = document.querySelector('.wrapper')
const max = document.querySelectorAll('.slide').length - 1
let count = 0

console.log(wrapper.offsetWidth) //800
console.log(slider.offsetWidth)  //3200

function sliderFunc() {
  counter++
  slider.scroll({
    top: 0,
    left: -(wrapper.offsetWidth * counter),
    behavior: 'smooth',
  })
}
next.addEventListener('click', sliderFunc)

CSS和HTML部分与原代码一致，此处省略。

解决方法 #

问题核心在于滚动操作的对象错误：你给slider元素调用scroll方法，但实际上slider是滚动内容，而wrapper才是可视容器（设置了overflow:hidden）。正确的做法是给wrapper调用scroll方法，让它滚动内部的slider内容。

同时需要调整以下几点：

• 移除slider的position:relative、left和transition样式，因为scroll方法的behavior:smooth已经能实现平滑滚动。
• 修正counter的边界逻辑，避免超出滚动范围。
• 完善prev按钮的滚动逻辑，以及自动轮播的暂停/恢复功能。

修改后的完整代码 #

CSS（仅修改slider部分）

.slider {
  width: fit-content;
  display: flex;
  height: 400px;
  /* 移除position、left、transition */
}

JavaScript

let counter = 0
const prev = document.querySelector('#prev')
const next = document.querySelector('#next')
const slider = document.querySelector('.slider')
const wrapper = document.querySelector('.wrapper')
const slideWidth = wrapper.offsetWidth
const maxSlides = document.querySelectorAll('.slide').length

// 下一页滚动逻辑
function goToNextSlide() {
  counter = (counter + 1) % maxSlides
  wrapper.scroll({
    top: 0,
    left: slideWidth * counter,
    behavior: 'smooth'
  })
}

// 上一页滚动逻辑
function goToPrevSlide() {
  counter = (counter - 1 + maxSlides) % maxSlides
  wrapper.scroll({
    top: 0,
    left: slideWidth * counter,
    behavior: 'smooth'
  })
}

// 自动轮播
let timer = setInterval(goToNextSlide, 3000)

// 鼠标悬停暂停轮播
wrapper.addEventListener('mouseover', () => {
  clearInterval(timer)
})

// 鼠标离开恢复轮播
wrapper.addEventListener('mouseout', () => {
  timer = setInterval(goToNextSlide, 3000)
})

// 绑定按钮事件
next.addEventListener('click', goToNextSlide)
prev.addEventListener('click', goToPrevSlide)

HTML部分无需修改。

关键说明 #

• 滚动容器是wrapper，调用wrapper.scroll()来控制内部内容的滚动位置。
• 使用取模运算(counter + 1) % maxSlides实现轮播循环，避免手动判断边界。
• slideWidth通过wrapper.offsetWidth动态获取，避免硬编码数值，提升灵活性。
• scroll方法的behavior:smooth参数实现平滑过渡，替代原有的CSS transition。

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