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

我试图在div中单独使用javascript向左或向右滚动，而不使用jquery。我已经使用jquery实现了它，但我需要单独使用javascript。代码：-

我希望按钮有助于沿div向左或向右水平滚动。如何操作。我使用jquery实现了以下目标：-

$（“#右键”）。单击（函数（）{
event.preventDefault（）；
$（“#内容”）。设置动画({
向左滚动：“+=200px”
}“慢”）；
});
$（“#左按钮”）。单击（函数（）{
event.preventDefault（）；
$（“#内容”）。设置动画({
向左滚动：“-=200px”
}“慢”）；
});
.outer{
显示器：flex；
溢出x：隐藏；
溢出y：隐藏；
}
.内部{
弹性：0.25%；
高度：100px；
利润率：10px；
}
.划桨{
位置：绝对位置；
顶部：50px；
底部：0；
宽度：30px；
高度：20px；
}
.左撇子{
左：0；
}
.对{
右：0；
}

用于滚动元素：


var content=document.getElementById（'content'），
滚动步长=200；
document.getElementById（'right-button'）。addEventListener（'click'，函数（e）{
e、 预防默认值（）；
设sl=content.scrollLeft，
cw=内容宽度；
如果（（sl+scrollStep）>=cw）{
内容。滚动到（cw，0）；
}否则{
content.scrollTo（（sl+scrollStep），0）；
}
});
document.getElementById（'left-button'）。addEventListener（'click'，函数（e）{
e、 预防默认值（）；
设sl=content.scrollLeft；
如果（（sl-scrollStep）您可以将其仅用于滚动，但动画将是单独的

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

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

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


const container=document.querySelector（“.container”）；
const lefty=document.querySelector（“.lefty”）；
让translate=0；
lefty.addEventListener（“单击”，函数（）{
翻译+=200；
container.style.transform=“translateX”（“+translate+”px“+”）；
});
const righty=document.querySelector（“.righty”）；
righty.addEventListener（“单击”，函数（）{
翻译-=200；
container.style.transform=“translateX”（“+translate+”px“+”）；
})；
.outer{
溢出x：隐藏；
溢出y：隐藏；
}
.集装箱{
显示器：flex；
转型：转型。4s轻松融入；
}
.内部{
弹性：0.25%；
高度：100px；
利润率：10px；
}
.划桨{
位置：绝对位置；
顶部：50px；
底部：0；
宽度：30px；
高度：20px；
}
.左撇子{
左：0；
z指数：1；
}
.对{
右：0；
z指数：1；
}
这是使用核心javascript定制水平滚动的解决方案

In.html

 <div class="pull-left mt-sm">
                      <i class="icon-arrow-left pointer" onclick="scrollLeft()"></i>
                </div>   

 <div #widgetsContent class="custom-slider-main">
        <div class="info-box">
             <img src="file.jpg" class="info-box">
          </div>
          <div class="info-box">
             <img src="file.jpg" class="info-box">
          </div>
          <div class="info-box">
             <img src="file.jpg" class="info-box">
          </div>
          <div class="info-box">
             <img src="file.jpg" class="info-box">
          </div>
          <div class="info-box">
             <img src="file.jpg" class="info-box">
          </div>
          <div class="info-box">
             <img src="file.jpg" class="info-box">
          </div>
    </div>

<div class="pull-right mt-sm">
    <i class="icon-arrow-right pointer" onclick="scrollRight()"></i>
    </div>

In.js

让widgetsContent=document.getElementById（“widgetsContent”）

点击左/右按钮，使用以下功能

scrollLeft(){
    widgetsContent.nativeElement.scrollLeft -= 150;
  }

  scrollRight(){
    widgetsContent.nativeElement.scrollLeft += 150;
  }

你不仅仅是在滚动，你还在制作动画。你想把它也保存在普通的javascript中吗？看起来你的JQuery解决方案不管用。JQuery代码管用……是的，我也想保存动画，也许……如果它不会造成太多困难……基本上我只想使用按钮向左或向右滚动。我也添加了代码笔链接检查也许jQuery代码是有效的。很难判断它抛出的错误。介意提供一些工作代码吗？请不要将您的答案代码发布到第三方网站，因为这些链接可能会随着时间的推移而消失，然后您的答案对找到它的任何人来说都是毫无意义的。编辑您的问题并将您的代码插入“代码段”。回答很好，肯定比我的好。我将保留它只是为了参考如何使用纯js。转换+转换是一个好主意，有好的性能动画。如何停止滚动到结束？“检查此”这不是一个很好的答案。答案应该包括他们正在做什么以及为什么要做的解释。此外，在这个解决方案中没有动画，OP目前确实有。@ScottMarcus这只是一个指向这个答案的链接？！@ScottMarcus不，这是一个指向评论的链接，OP说“如何在没有动画的情况下滚动，即使这样也行”.无论如何，在问题中添加了一个解释。@DontVoteMeDown谢谢你的条件，我接受了好处。
scrollLeft(){
    widgetsContent.nativeElement.scrollLeft -= 150;
  }

  scrollRight(){
    widgetsContent.nativeElement.scrollLeft += 150;
  }