swiper 模拟滾動條

需要引入的檔案

css部分

<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/5.0.0/css/swiper.css" rel="stylesheet">
  <style>
    .swiper-container {
      width: 500px;
      height: 400px;
      margin-left: 0;
    }

    .swiper-slide {
      background-color: slategray;
      font-size: 14px;
      height: auto;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 30px;
    }

    .swiper-container-vertical>.swiper-scrollbar {
      background: rgba(0, 0, 0, 1);
      height: 300px !important;
      top: 50px !important;
    }

    .swiper-scrollbar-drag {
      background: rgb(255, 0, 106);
    }
  </style>
           

html部分

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <h4>以和為貴</h4>
        <p>唉...朋友們好啊，我是公司前端開發人員。</p>
        <p>剛才有個測試問我這個頁面沒有資料，究竟發生腎麼事了，我說怎麼回事，給我發了幾張截圖。</p>
        <p>我一看！嗷！原來是昨天，兩個背景小夥，二十多歲。一個發量百分之九十，一個發量百分之八十多。</p>
        <p>他們說，唉…有組資料我們不能一次性給你全量，前端能不能處理成懶加載，哎…幫忙處理一下，傳回的資料。我說可以。</p>
        <p>我說幾十條資料都不能全量給，太菜了，他不服氣。我說小朋友：你把ES優化一下，現在傳回時間太長。他改不動，他說你這也沒用。我說我這個有用，這是優化，傳統項目是講優化的毫秒級速度。正常深度周遊的資料，我可以毫秒内傳回。
        </p>
        <p>啊…哈！他非讓我寫，我說可以。诶…我一說的啪就打開了ide，很快嗷！然後上來就是一個ctrl+c一個ctrl+v，我全都粘過來了啊粘過來以後git add ./git commit
          -m”搞定了“，推上去以後，我笑一下準備下班。</p>
        <p>按傳統來講已經可以下班了，他也承認，确實優化到了毫秒級。他不知道面向百度程式設計，他承認是我幫他改好的，啊。</p>
        <p>
          我關機準備下班，他突然拉住我說背景部署完前端有報錯，啊。我大E了啊，沒有改前端程式，矮…傳回值我按照兩個接口處理的，啊。但沒關系啊，按一個處理一樣沒問題！他也說，啊他截圖也說了，兩分多鐘以後，當機了，記憶體溢出，我說停停。然後兩分鐘以後，诶重新開機就好了。
        </p>
        <p>
          我說小夥子你不講碼德你不懂，他說對不起對不起，我部署錯分支了。啊我是…他說他是亂部署的，他可不是亂部署的啊：十萬條傳回資料，資料工整符合格式導緻浏覽器記憶體溢出電腦卡死，後來他說他植入了一段爬蟲，啊，看來是油備而來！這兩個年輕人不講碼德，來，騙，來，偷襲，我三十五歲即将被職場淘汰的老同志，這好嗎？這不好。
        </p>
        <p>我勸這位年輕人耗子尾汁！好好反思，以後不要再犯這樣的聰明，小聰明，啊！呃…研發團隊要以和為貴，要一緻對外，不要搞窩裡鬥，謝謝朋友們！</p>
      </div>
    </div>
    <div class="swiper-scrollbar"></div>
  </div>
           

js部分

<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.0.0/js/swiper.js"></script>
  <script>
    var swiper = new Swiper('.swiper-container', {
      direction: 'vertical',
      roundLengths: true,
      slidesPerView: 'auto',
      freeMode: true,
      scrollbar: {
        el: '.swiper-scrollbar',
      },
      mousewheel: true,
    });
  </script>