在 Javascript 中制作水平滚动菜单

Question

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

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

我该怎么做？

Answer 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>

在 Javascript 中制作水平滚动菜单

Make a horizontal scroll menu in Javascript

html

javascript

css

scroll

menu