Javascript 如何在Angularjs中在div内左右滚动

我想要一个指令或任何方法在div内使用angular或javascript水平滚动，请不要jquery

上面的小提琴显示了我正在努力实现的目标

$('#left').click(function () {
    var leftPos = $('div.outer_container').scrollLeft();
    console.log(leftPos);
    $("div.outer_container").animate({
        scrollLeft: leftPos - 500
    }, 800);
});

$('#right').click(function () {
    var leftPos = $('div.outer_container').scrollLeft();
    console.log(leftPos);
    $("div.outer_container").animate({
        scrollLeft: leftPos + 500
    }, 800);
});

上面的代码是我想要的jQuery

---

谢谢

将函数绑定到按钮，并使用scrollLeft属性按您想要的数量增减值

函数leftScroll（）{
document.querySelector（'div.outer_container'）。scrollLeft-=500；
}
函数rightsroll（）{
document.querySelector（'div.outer_container'）。scrollLeft+=500；
}

.outer_container{margin:0 auto；}
#左{左边距：300px；}
#右{}
.按钮{
光标：指针；
宽度：50px；
文本对齐：居中；
边框顶部：1px实心#96d1f8；
背景：#65a9d7；
背景：-webkit渐变（线性、左上、左下、从（#3e779d）到（#65a9d7））；
背景：-webkit线性梯度（顶部，#3e779d，#65a9d7）；
背景：-莫兹线性梯度（顶部，#3e779d，#65a9d7）；
背景：-ms线性梯度（顶部，#3e779d，#65a9d7）；
背景：-o-线性梯度（顶部，#3e779d，#65a9d7）；
填充物：5px10px；
-webkit边界半径：8px；
-moz边界半径：8px；
边界半径：8px；
-webkit盒阴影：rgba（0,0,0,1）0 1px 0；
-moz盒阴影：rgba（0,0,0,1）0 1px 0；
盒影：rgba（0,0,0,1）0 1px 0；
文本阴影：rgba（0,0,0,4）0 1px 0；
颜色：白色；
字体大小：14px；
字体系列：佐治亚，衬线；
文字装饰：无；
垂直对齐：中间对齐；
}
.按钮：悬停{
边框顶部颜色：#28597a；
背景：#28597a；
颜色：#ccc；
}
.按钮：激活{
边框顶部颜色：#1b435e；
背景：#1b435e；
}

向乐购目录添加评论

用户在这样的时候说
评论

用户在这样的时候说
评论

左边
好的

请不要jQuery，在你的代码中你使用jQuery？是的，我知道这很有趣，但我想避免使用jQuery，这就是为什么我提到“上面的代码是jQuery of want i want in angular”好的：D是的，很有趣，但我明白了，实际上你只是想让相同的脚本在没有jQuery的情况下工作，我想