如果活动幻灯片的内容超过其高度，请停止滑动.js鼠标滚轮幻灯片滚动-解网

问：

我想实现这样的行为，当内容超过幻灯片的高度时，刷卡器应该滚动浏览活动幻灯片中的所有内容，然后再移动到下一张幻灯片，请在这方面帮助我......

这是我的代码...

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: scroll;
    }

    .slide-content {
      max-width: 100%;
      max-height: 100%;
      overflow-y: auto !important;
    }

    .hassan {
      height: 800px;
    }
  </style>
</head>

<body>
  <!-- Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide has-content">
        <div class="slide-content">
          Slide 1
          <div>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, autem nihil quam amet velit fugiat
              incidunt in cupiditate hic! Consequatur optio rerum at minus, consequuntur laborum tempora maiores commodi

              dolorum
              voluptatem. Deleniti officiis sapiente cumque quas facere non quis quaerat soluta laboriosam, illo
              explicabo
              expedita fuga autem architecto eos quisquam accusantium, facilis enim fugit earum pariatur! Voluptas,
              iure.
              Soluta fugiat magni aliquam voluptatibus molestiae autem corporis dolore cupiditate doloribus placeat
              officiis quasi animi doloremque repellendus, magnam minus eveniet a ea qui molestias et. Sapiente quae
              atque
              reprehenderit velit blanditiis commodi quasi voluptatem repellat, nam inventore facilis quibusdam iusto id
              in ad officiis et ut incidunt ratione eum fugit deserunt modi. Saepe tempora esse ipsam dignissimos
              praesentium explicabo, reiciendis sapiente, dolore excepturi iusto placeat rerum assumenda repellendus!
              Veniam sed facilis, natus repellendus voluptates maxime ducimus alias explicabo accusantium. Quasi,
              voluptates quas? Ipsam delectus culpa error, libero eligendi nisi totam, accusamus possimus nobis
              consectetur ipsum ex architecto perferendis laudantium magnam quaerat consequuntur ea distinctio
              reprehenderit sit magni numquam quis. Odit omnis tempora explicabo pariatur culpa, molestiae debitis totam
              distinctio ipsum expedita cumque ea sunt alias eligendi saepe deleniti at facere sequi dolorum, vitae
              nisi.
              Nesciunt possimus eveniet commodi, ab labore eos aliquid voluptatibus asperiores consequatur sequi,
              distinctio est saepe dolorem, optio ad! Exercitationem animi maiores enim asperiores nesciunt velit error
              adipisci laboriosam, quasi harum fugiat beatae obcaecati rerum dignissimos doloribus aliquam numquam
              nostrum
              ipsam ut est? Maxime laboriosam rerum repellat quas dolore, dignissimos quia quaerat obcaecati eaque
              possimus? Dicta nulla at cupiditate voluptate eos earum debitis ab enim beatae alias. Consequuntur
              delectus
              magnam mollitia nemo non odio adipisci sapiente velit, accusantium distinctio recusandae consectetur,
              perferendis, cupiditate modi voluptate iusto alias ipsam eos. Facilis officiis earum magnam quasi possimus
              id enim minima, incidunt nulla iste ad harum eum consectetur quis sed vitae nam at cumque illo ipsam modi,
              deserunt voluptatum autem? Porro possimus, aliquam accusantium soluta cumque dicta hic. Nam voluptatem,
              culpa saepe asperiores suscipit veritatis vitae neque aliquam blanditiis, sunt nulla natus. Cupiditate
              officia eaque illum eligendi laudantium deserunt velit modi placeat non, ea soluta. Esse necessitatibus,
              non, est nam deleniti nostrum, dolorem quam sint cum fuga unde ducimus asperiores nemo voluptate quas
              voluptates fugit voluptatem quos! Ea modi quibusdam perspiciatis architecto quasi nesciunt non a vel
              dolores
              tenetur excepturi, suscipit quae quo, inventore in voluptatum labore debitis aliquam possimus sed,
              laboriosam explicabo eaque! Dignissimos, similique quisquam enim, perspiciatis soluta quo vitae ullam
              mollitia veritatis ea ex. Dicta illo, culpa atque ab aut voluptate, alias provident natus veritatis, a
              accusamus. Doloribus maiores rerum qui quas facilis reprehenderit itaque nesciunt voluptates laboriosam,
              quae incidunt. Maxime facilis cum totam tenetur illum excepturi vitae. Aspernatur non fugiat quam eveniet
              explicabo voluptatem quaerat ducimus placeat suscipit nobis nam recusandae eum hic labore, atque quia
              consectetur excepturi quo dolor possimus repellat tenetur saepe. Magni sint molestiae corrupti nam totam,
              nesciunt accusamus magnam harum tempore quibusdam maiores vitae blanditiis excepturi ratione repellendus
              itaque esse tempora consequatur dicta, aperiam quasi velit alias possimus natus? Illum voluptatibus
              architecto repudiandae, molestiae odio fuga sit deserunt. Modi ipsam ea suscipit quaerat vitae a ullam
              maiores? Corporis, harum aliquam quas tenetur voluptas nulla nihil architecto! Maiores fugit odio
              asperiores, eius quae soluta eos labore dicta rerum alias, dolore accusamus, debitis inventore distinctio
              quas tempore fuga sunt libero veritatis eum. Porro atque, consectetur unde veniam dolorum debitis adipisci
              saepe neque soluta velit eum totam, accusamus ex autem deserunt eos culpa amet voluptas. Ipsum, nam eaque
              ab
              aspernatur magni reiciendis assumenda tenetur, atque temporibus id excepturi, modi doloribus praesentium
              ad?
              Nisi sunt incidunt harum quae consequatur commodi voluptate quibusdam culpa vitae? Eveniet?</p>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="slide-content">
          Slide 2
        </div>
      </div>
      <div class="swiper-slide">
        <div class="slide-content">
          Slide 3
        </div>
      </div>
    </div>
  </div>



  
  <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

  <script>
    var swiper = new Swiper(".mySwiper", {
      direction: "vertical",
      slidesPerView: 1,
      spaceBetween: 0,
      speed: 1000,
      allowTouchMove: false,
      forceToAxis: true,
      mousewheel: {
        invert: false,
        forceToAxis: true,
      },
    });
  </script>

</body>

</html>

如果活动幻灯片的内容超过其高度，则 swiper.js 应停止滑动。

滑块滑动.js 滚轮

0赞 Ezra Siton 9/5/2023

swiper 不是为 [fullpage.js] 效果而制作的（它是一个滑块） - 解决此问题的一种方法是使用 API 选项（将忽略具有此类的元素滚动）。swiper-no-mousewheel

答： 暂无答案

上一个：“如何启用光滑的滑块鼠标滚轮滚动并修复滚动上的部分位置？”

下一个：禁用鼠标的 GNOME 终端中的 Neovim 在滚动时移动光标

如果活动幻灯片的内容超过其高度，请停止滑动.js鼠标滚轮幻灯片滚动

Stop swiper.js mousewheel slide scrolling if an active slide have content more than its height

评论