Question

我基本上有一个水平div，用于填充omdb API中的内容。它动态生成一堆搜索结果，并将它们全部显示出来;但是overflow: hidden是有效的。

我有两个问题：

我有两个自定义＆＃34;按钮＆＃34;我用空div和图标制作的。我给了它一个盒子阴影，让它有一种幻觉它会徘徊。是否更好的做法是使用按钮元素，或者它是否重要？
我的主要问题是：我希望能够使用箭头按钮在搜索结果之间来回导航。实现这个的最佳方法是什么？我唯一能想到的是使用按钮来调整搜索结果的左边距或右边距。（即按下左键会调整我的结果的左边距为负边距，右箭头会调整为正边距）

然而，这感觉粗糙而且不太准确。这意味着只需点击几下，内容就可以完全被推出视图（无论是偶然还是故意）。

有没有办法更有效地设置它？

以下是一些代码示例：

＆＃13;

const leftArrow = document.querySelector("#left-arrow");
const rightArrow = document.querySelector("#right-arrow");
const marginSelector = document.querySelector("#nav-margin");
var marginValue = -20;

leftArrow.addEventListener('click', () => {
  marginSelector.style.marginLeft = marginValue + "px";
  marginValue += -20;
});

＆＃13;

.scrollbar-container {
  width: 800px;
  display: flex;
  border: 1px #5e9af9 solid;
  position: relative;
  top: 100px;
  overflow: hidden;
  margin: auto;
  align-items: center;
}

.result-container {
  display: inline-block;
  margin: 2px;
}

img {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.nav-button {
  position: absolute;
  width: 50px;
  height: 50px;
  background: rgba(230, 232, 237, .5);
  text-align: center;
  margin: auto 0;
}

.left-arrow {
  left: 1%;
}

.right-arrow {
  right: 1%;
}

.margin-start {}

＆＃13;

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<div class="scrollbar-container">
  <div id="nav-margin" class="result-container">
    <img src="https://i.imgur.com/dA3tjxl.gif">
  </div>

  <div class="result-container">
    <img src="https://i.imgur.com/dA3tjxl.gif">
  </div>
  <div class="result-container">
    <img src="https://i.imgur.com/dA3tjxl.gif">
  </div>
  <div class="result-container">
    <img src="https://i.imgur.com/dA3tjxl.gif">
  </div>
  <div class="result-container">
    <img src="https://i.imgur.com/dA3tjxl.gif">
  </div>
  <div class="result-container">
    <img src="https://i.imgur.com/dA3tjxl.gif">
  </div>
  <div class="result-container">
    <img src="https://i.imgur.com/dA3tjxl.gif">
  </div>



  <div id="left-arrow" class="nav-button left-arrow">
    <i class="fas fa-angle-left fa-3x"></i>
  </div>

  <div id="left-arrow" class="nav-button right-arrow">
    <i class="fas fa-angle-right fa-3x"></i>
  </div>

</div>

＆＃13;

Answer 1

我已编写脚本来回移动搜索结果。您只需检查并调整marginLeft的{{1}}值即可。我已将marginSelector添加到transition CSS中，以使其看起来很流畅。已使用#nav-margin初始化marginValue。为方便起见，0容器已设置为max-width。当您更改500px时，请不要忘记在max-width中为rightArrow更改它。如果条件为动态，您也可以在内部创建值，以便实际获取addEventListener的值。

如果您有任何疑问，请与我们联系。

＆＃13;

.scrollbar-container

＆＃13;

const leftArrow = document.querySelector("#left-arrow");
const rightArrow = document.querySelector("#right-arrow");
const marginSelector = document.querySelector("#nav-margin");
var marginRightValue = 0;

rightArrow.addEventListener('click', () => {
  if(-(marginRightValue) <= (500+20))
    marginRightValue += -100;
  marginSelector.style.marginLeft = marginRightValue + "px";
});

leftArrow.addEventListener('click', () => {
  if(marginRightValue < 0)
      marginRightValue += 100;
   marginSelector.style.marginLeft =  marginRightValue + "px";
});

＆＃13;

.scrollbar-container {
  max-width: 500px;
  display: flex;
  border: 1px #5e9af9 solid;
  position: relative;
  top: 100px;
  overflow: hidden;
  margin: auto;
  align-items: center;
}

#nav-margin{
  transition: all 1s;
}

.result-container {
  display: inline-block;
  margin: 2px;
}

img {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.nav-button {
  position: absolute;
  width: 50px;
  height: 50px;
  background: rgba(230, 232, 237, .5);
  text-align: center;
  margin: auto 0;
  cursor: pointer;
}

.left-arrow {
  left: 1%;
}

.right-arrow {
  right: 1%;
}

.margin-start {}

＆＃13;

Answer 2

我不完全确定这是否是最好的回应，但是：

第1点 - 我认为这不重要。从语义的角度来看，<button>用于表单。有关更多上下文，请阅读：https://css-tricks.com/use-button-element/

第2点 - 我已经可以使用我的鼠标/触控板从左向右滚动（在我运行代码段的代码演示中）。因此，有额外的按钮来完成这项工作似乎没有必要我想在单击右键时将Javascript旋转木马（或滑块）效果变为效果，将我带到下一个“幻灯片”或结果的下一个块。然后，当右侧（或左侧）没有更多内容时，您可以禁用按钮，或者让它们循环回到开头。实际上，您需要考虑固定宽度的“幻灯片”窗口（响应不同的视口）和相应的“幻灯片”。这对你的问题有意义吗？

如何实现此水平搜索结果栏？

2 个答案: