实例讲解js如何实现dom元素横向及纵向滚动的动画

介绍

在网页中，滚动效果可以提高用户的体验感，而通过Javascript和CSS，我们可以实现多种滚动效果，其中横向和纵向滚动是最常见的两种。在此文章中，我们将重点介绍如何使用JavaScript实现DOM元素横向及纵向滚动的动画，并且给出相关的示例代码。

横向滚动

横向滚动实现起来比较简单，我们可以通过JavaScript计算元素当前的left位置，然后不断修改left的值来实现横向滚动的动画效果。下面是一个简单的实例：

// 获取元素节点
var box = document.querySelector('.box');
// 滚动函数
function scroll() {
  var left = box.offsetLeft; // 获取当前left位置
  box.style.left = left - 1 + 'px'; // 向左滚动
  requestAnimationFrame(scroll);
}
requestAnimationFrame(scroll); // 开启滚动动画

上述代码中，我们使用requestAnimationFrame方法来不断执行scroll函数，而scroll函数又通过修改元素的left值来实现横向滚动。在实际开发中，我们可以根据具体需求修改scroll函数来实现不同的效果，比如滚回头部、滚到指定位置、循环滚动等等。

限定滚动范围

上面的示例中，元素会一直向左移动，我们可以通过添加一些限制条件来限定滚动范围，以达到更好的效果。比如下面的代码实现了一个左右滚动的按钮，点击按钮可以控制滚动的方向和速度，同时滚动的范围被限制在一个容器中：

var box = document.querySelector('.box');
var container = document.querySelector('.container');
var btnLeft = document.querySelector('.btn-left');
var btnRight = document.querySelector('.btn-right');
var speed = 1;
var direction = 1;
var isScrolling = false;
container.addEventListener('mouseenter', function () {
  isScrolling = true;
  requestAnimationFrame(scroll);
});
container.addEventListener('mouseleave', function () {
  isScrolling = false;
});
btnLeft.addEventListener('click', function () {
  speed += 1;
});
btnRight.addEventListener('click', function () {
  speed -= 1;
});
function scroll() {
  if (!isScrolling) {
    return;
  }
  var left = box.offsetLeft;
  var containerWidth = container.offsetWidth;
  var boxWidth = box.offsetWidth;
  var maxOffsetLeft = containerWidth - boxWidth;
  var offsetLeft = left + speed * direction;
  if (offsetLeft < maxOffsetLeft || offsetLeft > 0) {
    direction *= -1;
    offsetLeft = left + speed * direction;
  }
  box.style.left = offsetLeft + 'px';
  requestAnimationFrame(scroll);
}

以上代码中我们添加了限制条件，通过比较元素的left值和容器的宽度来判断是否越界，如果越界就改变滚动的方向，实现来回滚动的效果。同时我们还通过控制speed的值来控制滚动的速度。

纵向滚动

纵向滚动与横向滚动的实现方法基本相似，我们同样可以通过计算元素的当前位置来实现滚动动画。下面是一个简单实例：

var box = document.querySelector('.box');
function scroll() {
  var top = box.offsetTop; // 获取当前top位置
  box.style.top = top - 1 + 'px'; // 向上滚动
  requestAnimationFrame(scroll);
}
requestAnimationFrame(scroll); // 开启滚动动画

然而，纵向滚动也存在一些细节需要注意。下面我们介绍几种常见的问题及其解决方案。

元素高度不足时如何滚动

如果元素的高度不足以填满容器，那么元素将会在容器的底部停留，无法产生滚动效果。我们可以通过设置元素的最小高度，或者给元素添加一个空白的占位符来解决这个问题。下面是一个示例代码：

var box = document.querySelector('.box');
var container = document.querySelector('.container');
var minHeight = container.offsetHeight + 1;
box.style.minHeight = minHeight + 'px'; // 设置最小高度
function scroll() {
  var top = box.offsetTop;
  var containerHeight = container.offsetHeight;
  var boxHeight = box.offsetHeight;
  var maxOffsetTop = containerHeight - boxHeight;
  if (top > maxOffsetTop) { // 判断是否越界
    top = maxOffsetTop;
  }
  box.style.top = top - 1 + 'px';
  requestAnimationFrame(scroll);
}
requestAnimationFrame(scroll);

上述代码中我们设置了元素的最小高度为容器高度加一，这样就可以保证元素的高度大于等于容器的高度。scroll函数中，我们判断元素的top值是否越界，如果越界就纠正top值，保证元素不会超出容器的范围。

使用CSS实现纵向滚动

如果不需要在JavaScript中控制纵向滚动的行为，我们也可以使用CSS中的scroll-behavior属性来实现纵向滚动。这个属性可以设置元素的滚动行为为平滑滚动，类似于JavaScript中的requestAnimationFrame方法。下面是一个示例：

.box {
  height: 100px;
  overflow-y: scroll;
  scroll-behavior: smooth; /* 平滑滚动 */
}

上述代码中，我们将元素的overflow-y属性设置为scroll，表示在元素高度不足时出现滚动条，然后将scroll-behavior属性设置为smooth，表示平滑滚动。

总结

在本篇文章中，我们介绍了如何使用JavaScript实现DOM元素的横向及纵向滚动的动画。横向滚动可以通过计算元素的left值来实现，同时可以通过限制范围和速度来产生不同的效果；纵向滚动也可以通过计算元素的top值来实现，不过需要特别注意高度不足时的滚动问题。除此之外，我们还介绍了使用CSS中的scroll-behavior属性实现纵向滚动的方法。希望读者在实际开发中可以应用本文介绍的技巧，达到更好的用户体验。