时间戳

首页 > 解决方案 > 制作水平按钮滚动条

html - 制作水平按钮滚动条

问题描述

我需要制作一个像这样的水平按钮滚动条，只有 HTML 和 CSS：在此处输入图像描述

在浏览互联网寻找解决方案后，我的代码如下所示：

.myBtnContainer{
    display: grid;
  grid-gap: calc(var(--gutter) / 2);
  grid-template-columns: repeat(6, calc(50% - var(--gutter) * 2));
  grid-template-rows: minmax(150px, 1fr);
  overflow-x: scroll;
  scroll-snap-points-x: repeat(100vh);
  scroll-snap-type: x mandatory;
}

.btn{
    position:relative;
    color: lightgrey;
    text-transform: uppercase;
    background: white;
    padding: 1em;
    border: 0.5em solid lightgrey;
    border-radius: 6px;
    display:inline-block;
    transition: all 0.3s ease 0s;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.btn:hover{
    color: grey;
    border-radius: 50px;
    border-color: grey;
    transition: all 0.3s ease 0s;
}
<div id="myBtnContainer">
            <button class="btn active" onclick="filterSelection('all')"> Show all</button>
            <button class="btn" onclick="filterSelection('nature')"> American</button>
            <button class="btn" onclick="filterSelection('cars')"> Italian</button>
            <button class="btn" onclick="filterSelection('people')"> Asian</button>
            <button class="btn" onclick="filterSelection('people')"> Mexican</button>
            <button class="btn" onclick="filterSelection('people')"> Romanian</button>
            <button class="btn" onclick="filterSelection('people')"> Barbeque</button>
            <button class="btn" onclick="filterSelection('people')"> Indian</button>
            <button class="btn" onclick="filterSelection('people')"> Chinese</button>
            <button class="btn" onclick="filterSelection('people')"> Mediterranean</button>
            <button class="btn" onclick="filterSelection('people')">Desserts</button>
            <button class="btn" onclick="filterSelection('people')"> Smoothies</button>
            <button class="btn" onclick="filterSelection('people')"> Coffee</button>
</div>

myBtnContainer位于body. _ 我在某处读到那是阻止scroll-snap-type: x mandatory;工作的东西，但我仍然不知道如何解决这个问题。我对此很陌生，所以任何建议都值得赞赏。

标签： htmlcss

解决方案

$(document).ready(function() {
  $('.b-slider').owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 3
      },
      1000: {
        items: 3
      }
    }
  })
});
.btn {
  color: lightgrey;
  text-transform: uppercase;
  background: red;
  padding: 1em;
  border: 0.5em solid lightgrey;
  border-radius: 6px;
  display: inline-block;
  transition: all 0.3s ease 0s;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width:50px;
  height:50px;
}

.btn:hover {
  color: black;
  border-radius: 50px;
  border-color: grey;
  transition: all 0.3s ease 0s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
</head>

<body>

    <div class="owl-carousel b-slider">

      <div class="item">
        <button class="btn" onclick="filterSelection('nature')"> American</button>
      </div>
      <div class="item">
        <button class="btn" onclick="filterSelection('nature')"> American1</button>
      </div>
      <div class="item">
        <button class="btn" onclick="filterSelection('nature')"> American2</button>
      </div>

    </div>
</body>

</html>

这应该这样做。使用 owlcarousel 作为滑块

推荐阅读