Javascript 单击时在div内水平滚动（带按钮）

我正试图弄明白（在javascript中）当你按下边缘上的箭头时，如何使我的小“幻灯片”水平滚动。 问题是：它在一个div中，在一个页面上，在这个“outsider”div中，当我们按下箭头时，只有$（'.history block）div应该移动。 我在网上找到了scrollLeft和其他所有东西，但都没用。请帮忙：） （css.margin+10-10有效，但这不是我想要的）

#局外人{
高度：100vh；
最大高度：1000px；
宽度：100%；
溢出：滚动；
位置：相对位置；
空白：nowrap；
溢出-x：滚动；
显示：内联块；
盒影：20px 0 20px 0灰色；
}
@关键帧时间轴{
0% {
右：0px；
}
100% {
右：1000px；
}
}
#局外人：悬停{
动画播放状态：暂停；
}
#内幕人士{
位置：绝对位置；
显示：内联块；
身高：100%；
宽度：自动；
溢出：隐藏；
空白：nowrap；
}
·历史街区{
身高：100%；
最小宽度：300px；
宽度：10vw；
边际：0-2px；
显示：内联块；
字体系列：“roboto condensed”，无衬线；
字体大小：60px；
字号：100；
颜色：#FFF；
盒影：3px 5px 20px rgba（0,0,0,0.8）；
过渡：宽度0.2s；
}
.年{
位置：绝对位置；
顶部：0px；
字体大小：70%；
字体大小：粗体；
利润率：30px 30px；
背景色：黑色；
填充：5px15px 5px 15px；
}
.头衔{
位置：绝对位置；
显示：块；
宽度：250px；
顶部：65px；
字体大小：15px；
利润率：30像素；
空白：正常；
过渡：宽度0.2s；
背景色：黑色；
填充物：5px；
线高：135%；
}
/*按钮*/
#按左键，
#右键{
位置：绝对位置；
对齐项目：居中；
对齐内容：居中对齐；
垂直对齐：中间对齐；
证明内容：中心；
显示器：flex；
对齐项目：居中；
z指数：1000；
颜色：黑色；
高度：100vh；
最大高度：1000px；
宽度：50px；
背景色：白色；
不透明度：0.5；
}
#按钮左{
左：0；
颜色：黑色；
}
#右键{
右：0；
}
#右键：悬停{
不透明度：0.7；
}
#按钮左：悬停{
不透明度：0.7；
}
/*图像卡介苗*/
B.bg-1993{
背景：丽贝卡紫；
背景尺寸：封面；
背景位置：中心；
}
B.bg-1994{
背景：谭；
背景尺寸：封面；
背景位置：中心；
}
B.bg-1995{
背景：水；
背景尺寸：封面；
背景位置：中心；
}
B.bg-1996{
背景：黑色；
背景尺寸：封面；
背景位置：中心；
}
.bg-1997{
背景：黄色；
背景尺寸：封面；
背景位置：中心；
}
.bg-1998{
背景：黄色；
背景尺寸：封面；
背景位置：中心；
}
.bg-1999{
背景：小麦；
背景尺寸：封面；
背景位置：中心；
}
.bg-2000{
背景：轻珊瑚；
背景尺寸：封面；
背景位置：底部；
}
.bg-2001{
背景：淡绿色；
背景尺寸：封面；
背景位置：底部；
}

1993
一、蒂罗莉亚·库帕：1993年。2月13日<塞默林-奥兹特里亚
维塞尼。
1994
二,。蒂罗莉亚·库帕：1994年。2月27日。塞默林-奥斯特里亚
1995
三、 蒂罗莉亚·库帕：1995年。2月25日。塞默林-奥斯特里亚
1996
四、 蒂罗莉亚·库帕：1996年。2月24日。塞默林-奥斯特里亚
1997
五、蒂罗莉亚·库帕：1997年。2月22日。塞默林-奥斯特里亚
1998
六、 蒂罗莉亚·库帕：1998年。马库斯28.
塞默林-奥斯特里亚
1999
七,。蒂罗莉亚·库帕：1999年。2月19日。塞默林-奥兹特里亚
Különvonat
布达佩斯。Körülbelül 700拉托洛。
2000
一、沃尔沃库帕：2000年。2月17日。塞默林-奥兹特里亚（Az elsőVolvo kupa）
2001
二,。沃尔沃库帕：2001年。2月17日。塞默林-奥斯特里亚

（请注意CSS第一行的打字错误：

局外人

，而不是

#局外人

）

使用方法。下面是代码的外观：

HTML:

。。。
...

如果您出于某种原因（即为了最大限度地提高浏览器支持）承诺使用jQuery，我建议您使用。

（请注意CSS第1行中的打字错误：

outsier

，而不是

#outsier

）

使用方法。下面是代码的外观：

HTML:

。。。
...

---

如果您出于某种原因（即为了最大限度地提高浏览器支持）承诺使用jQuery，我建议您使用。

您只需在javascript中添加scrollLeft属性，如函数scrollLeft和scrollright中所示：

你可以在这里得到完整的结果

HTML：
...
...
JS:
var btnRight=document.querySelector（“按钮右侧”）；
var mainDiv=document.querySelector（“局外人”）
函数scrollright（）{
mainDiv.scrollLeft+=900；
}
函数scrollleft（）{
mainDiv.scrollLeft-=900；
}

对于

函数scrollright（）

您需要在每次单击右按钮时增加

#outsider

div的左滚动位置（+）。并在每次向左滚动时，减小

函数scrollleft（）

的

#outside

div的左滚动位置（-）

const outsider = document.getElementById('outsider');
const distance = 200;

function scrollLft() {
  outsider.scrollBy({
    left: -distance,
    behavior: 'smooth'
  });
}

function scrollRight() {
  outsider.scrollBy({
    left: distance,
    behavior: 'smooth'
  });
}

<div id="button-left" onclick="scrollLft()">...</div>
<div id="button-right" onclick="scrollRight()">...</div>

HTML:
<div id="button-left" onclick="scrollleft()">...</div>
<div id="button-right" onclick="scrollright()">...</div>

JS:
var btnRight = document.querySelector("#button-right");
var mainDiv = document.querySelector("#outsider")

function scrollright() {
   mainDiv.scrollLeft += 900;
}

function scrollleft() {
   mainDiv.scrollLeft -= 900;
}