javascript - 如何给scrollLeft变化的元素添加动画效果呢？

Question

如何给scrollLeft变化的元素添加动画效果呢

如题，我想在scrollLeft发生赋值改变的时候给元素加一个动画效果，让移动不那么生硬。

Answer 1

给滚动容器设置 scroll-behavior 属性做平滑滚动？

<div id="container">  <div id="content">Click the button to slide right!</div></div><button id="slide" type="button">Slide right</button>

#container {  width: 100px;  height: 100px;  border: 1px solid #ccc;  overflow-x: scroll;  scroll-behavior: smooth;}#content {  width: 250px;  background-color: #ccc;}

const button = document.getElementById("slide");button.onclick = function () {  document.getElementById("container").scrollLeft += 20;};

Answer 2

给 scrollLeft 变化的元素添加动画效果，你可以使用 CSS 动画或 JavaScript 的 requestAnimationFrame 方法。以下是两种方法的示例：

方法1：使用 CSS 动画

你可以创建一个 CSS 动画，然后使用 JavaScript 来触发这个动画。CSS 动画不能直接应用于 scrollLeft，但你可以通过改变元素的 transform 属性来模拟滚动效果。

CSS:

@keyframes scrollAnimation {  from {    transform: translateX(0);  }  to {    transform: translateX(-100%); /* 根据需要调整 */  }}.scrollable-element {  overflow: hidden;  width: 100%;}.scrollable-content {  display: flex;  animation: scrollAnimation 2s linear forwards; /* 2s 是动画时长，根据需要调整 */}

JavaScript:

const scrollableElement = document.querySelector('.scrollable-element');const scrollableContent = document.querySelector('.scrollable-content');// 假设你要滚动到某个位置const scrollTarget = 100; // 这里是示例值，你可以根据需要设置// 计算需要应用的 transform 值const transformValue = -scrollTarget + 'px';// 应用动画scrollableContent.style.transform = `translateX(${transformValue})`;

方法2：使用 requestAnimationFrame

这种方法允许你更精细地控制滚动过程，可以逐帧地改变 scrollLeft 的值。

JavaScript:

const scrollableElement = document.querySelector('.scrollable-element');const scrollTarget = 100; // 滚动目标位置const duration = 2000; // 动画时长，单位毫秒let startTime = null;function animateScroll(currentTime) {  if (!startTime) startTime = currentTime;  const timeElapsed = currentTime - startTime;  const run = ease(timeElapsed, 0, scrollTarget, duration);  if (timeElapsed < duration) {    scrollableElement.scrollLeft = run;    requestAnimationFrame(animateScroll);  } else {    scrollableElement.scrollLeft = scrollTarget;  }}// 缓动函数，这里使用简单的线性缓动function ease(t, b, c, d) {  t /= d / 2;  if (t < 1) return c / 2 * t + b;  t--;  return -c / 2 * (t * (t - 2) - 1) + b;}animateScroll(0);

这两种方法都可以实现 scrollLeft 变化的动画效果。你可以根据自己的需求和偏好选择合适的方法。