使用 JS 滚动 element-left - CSS

在 Web 开发中，滚动元素通用的技术是 JavaScript 和 CSS 。其中使用 JavaScript 实现动态滚动比较基础，无需借助任何库。

实现滚动的代码

以下是实现元素横向滚动的最简单代码：

function scrollLeft(element, change, duration) {
    let start = element.scrollLeft;
    let currentTime = 0;
    let increment = 20;
    let animateScroll = function(){        
        currentTime += increment;
        let val = Math.easeInOutQuad(currentTime, start, change, duration);
        element.scrollLeft = val;
        if(currentTime < duration) {
            setTimeout(animateScroll, increment);
        }
    };
    animateScroll();
}

Math.easeInOutQuad = function (t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t + b;
    t--;
    return -c/2 * (t*(t-2) - 1) + b;
};

此代码包含了三个参数：

1. element: 需要横向滚动的元素
2. change: 元素滚动的距离，以像素（px）为单位
3. duration: 动画的持续时间，以毫秒（ms）为单位

使用示例

通过以下示例，您可以了解如何使用上述代码:

<!-- HTML -->
<div id="container">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 13</li>
    <li>Item 14</li>
    <li>Item 15</li>
    <li>Item 16</li>
    <li>Item 17</li>
    <li>Item 18</li>
    <li>Item 19</li>
    <li>Item 20</li>
  </ul>
</div>

/* CSS */
#container {
  width: 500px;
  height: 100px;
  overflow: hidden;
}
ul {
  width: 1400px;
  height: 100px;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
li {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: green;
  margin: 0;
  padding: 0;
  text-align: center;
  line-height: 100px;
}

// JavaScript
let container = document.getElementById('container');
scrollLeft(container, 500, 1000);

总结

通过上述代码，我们可以实现具有动态效果的滚动元素。此技术可用于网站设计的导航/页面滚动等方面。