Javascript 如何实现这个水平搜索结果栏？

我基本上有一个水平div，用于填充来自omdbapi的内容。它动态生成一组搜索结果，并显示所有结果；但是，

溢出：隐藏

处于活动状态

我有两个问题：

我有两个自定义的“按钮”，我用一个空的div和图标。我给了它一点框状阴影，让它产生一种悬停的错觉。使用按钮元素是更好的做法，还是重要

我的主要问题是：我希望能够使用箭头按钮在搜索结果之间来回导航。实现这一点的最佳方式是什么？我唯一能想到的就是用按钮来调整搜索结果的左右边距。（即，按下左键将使用负边距调整结果的左边距，右箭头将使用正边距调整结果的左边距）

然而，这感觉很粗糙，不太准确。也就是说，只需额外点击几下，内容就可以完全从视图中删除（无论是偶然还是故意）

有没有一种方法可以更有效地进行设置

以下是一些代码作为示例：

const leftArrow=document.querySelector（“左箭头”）；
const rightArrow=document.querySelector（“右箭头”）；
const marginSelector=document.querySelector（“导航边距”）；
var marginValue=-20；
leftArrow.addEventListener（'单击'，（）=>{
marginSelector.style.marginLeft=marginValue+“px”；
marginValue+=-20；
});
.scrollbar容器{
宽度：800px；
显示器：flex；
边框：1px#5e9af9实心；
位置：相对位置；
顶部：100px；
溢出：隐藏；
保证金：自动；
对齐项目：居中；
}
.结果容器{
显示：内联块；
保证金：2倍；
}
img{
显示：内联块；
垂直对齐：中间对齐；
位置：相对位置；
}
.导航按钮{
位置：绝对位置；
宽度：50px；
高度：50px；
背景：rgba（230,232,237,5）；
文本对齐：居中；
保证金：自动0；
}
.左箭头{
左：1%；
}
.右箭头{
右：1%；
}
.margin start{}
我不确定这是否是最好的回答，但是：

第1点-我认为这在这里不重要。从语义的角度来看，
表示形式。有关更多上下文，请阅读：

第2点-我已经可以使用鼠标/触摸板从左向右滚动/滑动（在运行代码片段时的代码演示中）。因此，有额外的按钮来完成这项工作似乎是不必要的。我更愿意在点击右键进入下一个“幻灯片”或下一块结果时，制作一个类似Javascript旋转木马（或滑块）的效果。然后，当右侧（或左侧）没有更多内容时，可以禁用按钮，或者让它们循环回到开始。实际上，您需要考虑一个固定宽度的“滑动”窗口（对不同的视口作出响应）和相应的“滑动”。这对你的问题有意义吗？
我已经写了一个脚本来来回移动搜索结果。您只需检查并调整
marginLeft
选框器的
marginLeft
值。我在
#nav margin
的
CSS
中添加了
transition
，使其看起来平滑<代码>marginValue

已用

0

初始化<为方便起见，已将容器的“代码>最大宽度”设置为“代码>500px”。更改

max width

时，不要忘记在右侧箭头的

addEventListener

中更改它。您还可以将if条件中的值设置为动态，以便它实际从

.scrollbar container

获取值

如果您有任何疑问，请告诉我

const leftArrow=document.querySelector（“左箭头”）；
const rightArrow=document.querySelector（“右箭头”）；
const marginSelector=document.querySelector（“导航边距”）；
var marginRightValue=0；
rightArrow.addEventListener（'单击'，（）=>{
如果（-（边际价值）{
如果（边缘亮度值<0）
边际价值+=100；
marginSelector.style.marginLeft=marginRightValue+“px”；
})；

.scrollbar容器{
最大宽度：500px；
显示器：flex；
边框：1px#5e9af9实心；
位置：相对位置；
顶部：100px；
溢出：隐藏；
保证金：自动；
对齐项目：居中；
}
#资产净值差额{
过渡：所有1；
}
.结果容器{
显示：内联块；
保证金：2倍；
}
img{
显示：内联块；
垂直对齐：中间对齐；
位置：相对位置；
}
.导航按钮{
位置：绝对位置；
宽度：50px；
高度：50px；
背景：rgba（230,232,237,5）；
文本对齐：居中；
保证金：自动0；
光标：指针；
}
.左箭头{
左：1%；
}
.右箭头{
右：1%；
}
.margin start{}

你需要为此编写一些脚本代码。你想用纯

javascript

还是允许使用

jquery

呢？我更喜欢香草Js。我想我能想出一些办法，但我觉得效率不高。@gurupasadrao你能更新你到目前为止已经/尝试过的吗？回答你的第一个问题吗在“关于按钮”上，即使您可以真正使用任何东西，使用

标记也是一种很好的做法，这样基于键盘的用户和其他专业设备就可以实际使用您的控件并使用网站，浏览器可以处理诸如光标和焦点状态之类的事情。@GuruprasadRao在这里，请检查代码段。Th就我而言，这是一个非常粗糙的工作，但本质上我就是这么想的。啊，我想你可能混淆了代码片段本身的窗口，而不是我的div的大小。如果你将代码片段扩展到一整页，你会发现你无法向左或向右滚动，unf