自动卡片滑块中最左边的卡片未完全显示

Question

我在我的网站上集成了这个自动滑块卡 html 代码，但整个最左边的卡片没有显示，看起来像是被切断了。

document.addEventListener("DOMContentLoaded", () => {
  const wrapper = document.querySelector(".wrapper");
  const carousel = document.querySelector(".carousel");
  const firstCardWidth = carousel.querySelector(".card").offsetWidth;
  const arrowBtns = document.querySelectorAll(".wrapper i");
  const carouselChildren = [...carousel.children];

  let isDragging = false,
    isAutoPlay = true,
    startX, startScrollLeft, timeoutId;

  let cardPerView = 10;

  carouselChildren.slice(-cardPerView).reverse().forEach(card => {
    carousel.insertAdjacentHTML("afterbegin", card.outerHTML);
  });

  carouselChildren.slice(0, cardPerView).forEach(card => {
    carousel.insertAdjacentHTML("beforeend", card.outerHTML);
  });

  carousel.classList.add("no-transition");
  carousel.scrollLeft = carousel.offsetWidth - wrapper.offsetWidth + (firstCardWidth * cardPerView) / 2;
  carousel.classList.remove("no-transition");

  arrowBtns.forEach(btn => {
    btn.addEventListener("click", () => {
      carousel.scrollLeft += btn.id === "left" ? -firstCardWidth : firstCardWidth;
    });
  });

  const dragStart = (e) => {
    isDragging = true;
    carousel.classList.add("dragging");
    startX = e.pageX;
    startScrollLeft = carousel.scrollLeft;
  };

  const dragging = (e) => {
    if (!isDragging) return;
    carousel.scrollLeft = startScrollLeft - (e.pageX - startX);
  };

  const dragStop = () => {
    isDragging = false;
    carousel.classList.remove("dragging");
  };

  const infiniteScroll = () => {
    if (carousel.scrollLeft === 0) {
      carousel.classList.add("no-transition");
      carousel.scrollLeft = carousel.scrollWidth - (2 * carousel.offsetWidth);
      carousel.classList.remove("no-transition");
    } else if (Math.ceil(carousel.scrollLeft) === carousel.scrollWidth - carousel.offsetWidth) {
      carousel.classList.add("no-transition");
      carousel.scrollLeft = carousel.offsetWidth;
      carousel.classList.remove("no-transition");
    }

    clearTimeout(timeoutId);
    if (!wrapper.matches(":hover")) autoPlay();
  };

  const autoPlay = () => {
    if (window.innerWidth < 800 || !isAutoPlay) return;
    timeoutId = setTimeout(() => carousel.scrollLeft += firstCardWidth, 1000);
  };

  autoPlay();

  carousel.addEventListener("mousedown", dragStart);
  carousel.addEventListener("mousemove", dragging);
  document.addEventListener("mouseup", dragStop);
  carousel.addEventListener("scroll", infiniteScroll);
  wrapper.addEventListener("mouseenter", () => clearTimeout(timeoutId));
  wrapper.addEventListener("mouseleave", autoPlay);
});

@import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap');

* {
  0;
  padding: 0;
  box-sizing: border-box;
  'Poppins',
  sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #fff;
  0 20px;
}

.wrapper {
  position: relative;
  max-width: 1560px;
  width: 100%;
  padding: 0 60px;
  overflow: hidden;
}

.wrapper i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #E21C21;
  font-size: 3.5rem;
  padding: 5px;
  z-index: 1;
  user-select: none;
}

.wrapper i#left {
  left: 10px;
}

.wrapper i#right {
  right: 10px;
}

.wrapper i:hover {
  color: #020202;
}

.carousel {
  display: flex;
  gap: 15px;
  overflow: hidden;
  scroll-behavior: smooth;
  padding: 15px 0;
  border-radius: 10px;
  scroll-snap-type: x mandatory;
  scroll-snap-align: start;
}

.carousel.no-transition {
  scroll-behavior: auto;
}

.card {
  min-width: 130px;
  max-width: 130px;
  height: 150px;
  background: #fff;
  padding: 10px 15px;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card:hover {
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.3);
}

.card .img {
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card .img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.card .text {
  width: 100%;
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  color: #333;
  10px;
  "Wix Madefor Text",
  sans-serif;
}

<!-- Fontawesome Link for Icons -->
<link rel="nofollow" href="https://unpkg.com/[email protected]/css/boxicons.min.css">
<!-- Google Fonts Link -->
<link rel="nofollow" href="https://fonts.googleapis.com">
<link rel="nofollow" href="https://fonts.gstatic.com" crossorigin>
<link rel="nofollow" href="https://fonts.googleapis.com/css2?family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&amp;display=swap">
<div class="wrapper">
  <i id="left" class="bx bx-chevron-left" aria-label="Scroll Left"></i>
  <ul class="carousel">
    <li class="card">
      <div class="img">
        <a href="https://www.porsche.com" target="_blank"><img src="https://i.imgur.com/u0tKzKe.png" alt="Porsche Logo" draggable="false"></a>
      </div>
      <div class="text">Porsche</div>
    </li>
    <li class="card">
      <div class="img">
        <a href="https://www.fiat.com" target="_blank"><img src="https://i.imgur.com/EZ0DQqx.png" alt="Fiat Logo" draggable="false"></a>
      </div>
      <div class="text">Fiat</div>
    </li>
  </ul>
  <i id="right" class="bx bx-chevron-right" aria-label="Scroll Right"></i>
</div>

我无法分享完整的代码，但它是： https://justpaste.it/f8u82

我该如何解决这个问题

Answer 1

正如您在这些简化示例中看到的，问题是由您的

scroll-snap-align

设置引起的。

• 在顶部条中我使用了

  scroll-snap-align: center

• 在底部条中我使用了

  scroll-snap-align: start

如您所见，当向侧面滚动底部条带时，卡片想要捕捉到容器的左侧。该容器在第一张卡片的左侧有 30 像素的左内边距，但很难滚动到它。在 Safari 中，当我“第三次尝试”滚动到第一张卡片的左侧时，它实际上会这样做。它会很好地显示几秒钟，然后弹回，使第一张卡片的边缘与容器的左边缘对齐。 我认为最好的选择就是捕捉到中心而不是开始。

body {
  background: #888;
  margin: 2em 0;
}

.carousel {
  display: flex;
  gap: 15px;
  overflow: auto;
  padding: 15px 30px 25px;
  scroll-snap-type: x mandatory;
  margin: 0 0 2em;
  background: white;
  border-top: 5px solid #ccc;
  border-bottom: 5px solid #ccc;
}

.card {
  min-width: 130px;
  max-width: 130px;
  height: 150px;
  background: #fff;
  padding: 10px 15px;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.c2 .card {
  scroll-snap-align: start;
}

.card:hover {
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.3);
}

.card .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card .text {
  font-weight: 700;
  text-align: center;
  color: #333;
}

<ul class="carousel">
  <li class="card">
    <div class="img">
      <a href="https://www.porsche.com" target="_blank"><img src="https://i.imgur.com/u0tKzKe.png" alt="Porsche Logo" draggable="false"></a>
    </div>
    <div class="text">Porsche</div>
  </li>
  <li class="card">
    <div class="img">
      <a href="https://www.fiat.com" target="_blank"><img src="https://i.imgur.com/EZ0DQqx.png" alt="Fiat Logo" draggable="false"></a>
    </div>
    <div class="text">Fiat</div>
  </li>
  <li class="card">
    <div class="img">
      <a href="https://www.porsche.com" target="_blank"><img src="https://i.imgur.com/u0tKzKe.png" alt="Porsche Logo" draggable="false"></a>
    </div>
    <div class="text">Porsche</div>
  </li>
  <li class="card">
    <div class="img">
      <a href="https://www.fiat.com" target="_blank"><img src="https://i.imgur.com/EZ0DQqx.png" alt="Fiat Logo" draggable="false"></a>
    </div>
    <div class="text">Fiat</div>
  </li>
  <li class="card">
    <div class="img">
      <a href="https://www.porsche.com" target="_blank"><img src="https://i.imgur.com/u0tKzKe.png" alt="Porsche Logo" draggable="false"></a>
    </div>
    <div class="text">Porsche</div>
  </li>
  <li class="card">
    <div class="img">
      <a href="https://www.fiat.com" target="_blank"><img src="https://i.imgur.com/EZ0DQqx.png" alt="Fiat Logo" draggable="false"></a>
    </div>
    <div class="text">Fiat</div>
  </li>
  <li class="card">
    <div class="img">
      <a href="https://www.porsche.com" target="_blank"><img src="https://i.imgur.com/u0tKzKe.png" alt="Porsche Logo" draggable="false"></a>
    </div>
    <div class="text">Porsche</div>
  </li>
  <li class="card">
    <div class="img">
      <a href="https://www.fiat.com" target="_blank"><img src="https://i.imgur.com/EZ0DQqx.png" alt="Fiat Logo" draggable="false"></a>
    </div>
    <div class="text">Fiat</div>
  </li>
</ul>

<ul class="carousel c2">
  <li class="card">
    <div class="img">
      <a href="https://www.porsche.com" target="_blank"><img src="https://i.imgur.com/u0tKzKe.png" alt="Porsche Logo" draggable="false"></a>
    </div>
    <div class="text">Porsche</div>
  </li>
  <li class="card">
    <div class="img">
      <a href="https://www.fiat.com" target="_blank"><img src="https://i.imgur.com/EZ0DQqx.png" alt="Fiat Logo" draggable="false"></a>
    </div>
    <div class="text">Fiat</div>
  </li>
  <li class="card">
    <div class="img">
      <a href="https://www.porsche.com" target="_blank"><img src="https://i.imgur.com/u0tKzKe.png" alt="Porsche Logo" draggable="false"></a>
    </div>
    <div class="text">Porsche</div>
  </li>
  <li class="card">
    <div class="img">
      <a href="https://www.fiat.com" target="_blank"><img src="https://i.imgur.com/EZ0DQqx.png" alt="Fiat Logo" draggable="false"></a>
    </div>
    <div class="text">Fiat</div>
  </li>
  <li class="card">
    <div class="img">
      <a href="https://www.porsche.com" target="_blank"><img src="https://i.imgur.com/u0tKzKe.png" alt="Porsche Logo" draggable="false"></a>
    </div>
    <div class="text">Porsche</div>
  </li>
  <li class="card">
    <div class="img">
      <a href="https://www.fiat.com" target="_blank"><img src="https://i.imgur.com/EZ0DQqx.png" alt="Fiat Logo" draggable="false"></a>
    </div>
    <div class="text">Fiat</div>
  </li>
  <li class="card">
    <div class="img">
      <a href="https://www.porsche.com" target="_blank"><img src="https://i.imgur.com/u0tKzKe.png" alt="Porsche Logo" draggable="false"></a>
    </div>
    <div class="text">Porsche</div>
  </li>
  <li class="card">
    <div class="img">
      <a href="https://www.fiat.com" target="_blank"><img src="https://i.imgur.com/EZ0DQqx.png" alt="Fiat Logo" draggable="false"></a>
    </div>
    <div class="text">Fiat</div>
  </li>
</ul>