js控制滚动条让元素往左滑动（横向滚动原理、scrollLeft）js控制滚动条让元素往左滑动（横向滚动原理、scrol

效果

元素横向滚动.gif

源码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
  </style>
</head>

<body>
  <div id="parentNode" style="overflow-x:scroll;margin:0 auto;width: 1200px;background-color: pink;height: 400px;">
    <div style="display: flex;height: 100%;width: 2000px;" id="subChild">
      <div style="height: 100%;width: 200px;background-color: #000;margin-right: 15px;"></div>
      <div style="height: 100%;width: 200px;background-color: #000;margin-right: 15px;"></div>
      <div style="height: 100%;width: 200px;background-color: #000;margin-right: 15px;"></div>
      <div style="height: 100%;width: 200px;background-color: #000;margin-right: 15px;"></div>
      <div style="height: 100%;width: 200px;background-color: #000;margin-right: 15px;"></div>
      <div style="height: 100%;width: 200px;background-color: #000;margin-right: 15px;"></div>
      <div style="height: 100%;width: 200px;background-color: #000;"></div>
    </div>
  </div>

  <button style="margin-right: 15px;" onclick="leftMove()">左箭头</button>
  <button>右箭头</button>

  <script>
    function leftMove() {
      var parentNode = document.getElementById("parentNode");
      parentNode.scrollLeft += 215;
      console.log(111);
    }
  </script>
</body>

</html>