如何使用纯 javascript 函数而不使用 jquery 在 div 内向左或向右滚动？

Question

我试图单独使用 javascript 在 div 内向左或向右滚动，而没有出于某种目的使用 jquery。我已经使用 jquery 实现了它，但我需要单独使用 javascript 来完成它。代码：-

我想让按钮帮助沿 div 向左或向右水平滚动。怎么做。我以这种方式使用 jquery 实现了它：-

 $('#right-button').click(function() {
  event.preventDefault();
  $('#content').animate({
    scrollLeft: "+=200px"
  }, "slow");
});

 $('#left-button').click(function() {
  event.preventDefault();
  $('#content').animate({
    scrollLeft: "-=200px"
  }, "slow");
});

 .outer {
  display: flex;
  overflow-x: hidden;
  overflow-y: hidden;
}

.inner {
  flex: 0 0 25%;
  height: 100px;
  margin: 10px;
}

.paddle {
  position: absolute;
  top: 50px;
  bottom: 0;
  width: 30px;
  height: 20px;
}

.lefty {
  left: 0;
}

.righty {
  right: 0;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer" id="content">
	<button class="lefty paddle" id="left-button"></button>
  <div class="inner" style="background:red"></div>
  <div class="inner" style="background:green"></div>
  <div class="inner" style="background:blue"></div>
  <div class="inner" style="background:yellow"></div>
  <div class="inner" style="background:orange"></div>
	<button class="righty paddle" id="right-button"></button>
</div>

原文由 J.Doe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你只需要使用 translateX 如下： 另外，我强烈建议你不要使用 js 来制作像这样的简单动画。

 const container = document.querySelector(".container");
const lefty = document.querySelector(".lefty");
let translate = 0;

lefty.addEventListener("click", function() {
  	translate += 200;
  	container.style.transform = "translateX(" + translate + "px" + ")";
});

const righty = document.querySelector(".righty");
righty.addEventListener("click", function() {
  	translate -= 200;
  	container.style.transform = "translateX(" + translate + "px" + ")";
});

 .outer {

  overflow-x: hidden;
	  overflow-y: hidden;

}

.container {
  display: flex;
  transition: transform .4s ease-in;
}

.inner {
  flex: 0 0 25%;
  height: 100px;
	margin:10px;
}
.paddle {
	position: absolute;
	top: 50px;
	bottom: 0;
	width: 30px;
	height:20px;
}
.lefty {
	left: 0;
  z-index:1;
}
.righty{
	right: 0;
   z-index:1;
}

 <button class="lefty paddle" id="left-button"></button>
<div class="outer" id="content">
  <div class="container">
    <div class="inner" style="background:red"></div>
    <div class="inner" style="background:green"></div>
    <div class="inner" style="background:blue"></div>
    <div class="inner" style="background:yellow"></div>
    <div class="inner" style="background:orange"></div>
  </div>
</div>
<button class="righty paddle" id="right-button"></button>

原文由 Michael 发布，翻译遵循 CC BY-SA 4.0 许可协议