在Javascript中制作水平滚动菜单[关闭]答案

【问题标题】：Make a horizontal scroll menu in Javascript [closed]在Javascript中制作水平滚动菜单[关闭]
【发布时间】：2020-02-13 15:15:48
【问题描述】：

我想创建一个像 Pinterest 这样的水平滚动菜单：

我不想使用 Bootstrap 或 react，我只想使用 HTML、CSS 和 Javascript。

我该怎么做？

【问题讨论】：

你试过什么？ w3schools.com/howto/howto_css_menu_horizontal_scroll.asp 是一个很好的起点。
@King11 我尝试按照您发送的链接进行操作，但我不知道如何放置按钮以向左或向右移动。你知道怎么做吗？
您有当前代码的代码 sn-p 或 jsfiddle 吗？我需要看看你正在使用什么来为你提供更多帮助。
@King11 jsfiddle.net/Sain_MX/khro9ns2
所以你只想让箭头点击向左还是向右？

标签： javascript html css scroll menu

【解决方案1】：

我为您创建了一个小例子。

所以基本上你会创建一个固定宽度的容器。这将是显示的视图。在该容器中，您将创建一个从父容器溢出的新容器，但父容器不会显示溢出。

如果您随后单击左或右，您将向左或向右滑动您的内部 div 并显示其他内容。

var btnL = document.getElementById("btnLeft");
var btnR = document.getElementById("btnRight");

var content = document.getElementById("content");

btnR.addEventListener("click", goRight);
btnL.addEventListener("click", goLeft);

var clickedIndex = 0;

function goRight()
{
	if (clickedIndex < 2)
  {
    clickedIndex = clickedIndex +1;
   		content.style.marginLeft = -190*clickedIndex + "px";  
  }

}

function goLeft()
{
	if (clickedIndex >0)
  {
    clickedIndex = clickedIndex -1;
	content.style.marginLeft = -190*clickedIndex + "px";  
 
  }
}

.mainViewer
{
  max-width:570px;
  width:570px;
  height:250px;
  margin:auto;
  background-color:red;
  overflow:hidden;
}

.content 
{
  display: flex;
  height:100%;
  min-width:calc(190px *5);
  flex-direction: row;
  align-items: center;
  justify-content: center;
  transition: all .6s;
    
}

.card
{
  height:150px;
  width:150px;
  background-color:blue;
  margin-left:20px;
  margin-right:20px;
  display:flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.clickable
{
  cursor:pointer;
}

<div class="mainViewer">
  
  <div class="content" id="content">
  
    <div class="card">
     1
    </div>
    
    <div class="card">
     2
    </div>

    <div class="card">
     3
    </div>

    <div class="card">
     4
    </div>

    <div class="card">
     5
    </div>

  </div>



</div>

<a class="clickable" id="btnLeft">Left</a>
<a class="clickable" id="btnRight">Right</a>

【讨论】：

在您的 html 代码中出现 5 张卡片，但是当您运行代码时它只允许我滚动到 4。我该如何解决这个问题？
@SebastiánVarellaGmz 这是因为我将 js 限制为仅向右滚动一个然后禁用该操作。只需检查位置并让它滚动多次
你能告诉我怎么做吗？
@SebastiánVarellaGmz 我已经为您更新了上面的示例。只需将您当前的状态存储在一个 int 中，然后允许它点击是否正确。