swiper.js插件实现pc端文本上下滑动功能示例

本文实例讲述了swiper.js插件实现pc端文本上下滑动功能。分享给大家供大家参考，具体如下：

在网站上看小说，文本太长时，靠鼠标去拖动滚动条太麻烦，鼠标滚轮又不精确，滚一下就不知道跑到哪去了。能不能像移动端那样可以鼠标上下滑动呢？swiper可以完美解决这个问题。

1、首先当然是引入swiper文件了：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/swiper/4.1.6/css/swiper.min.css" rel="external nofollow" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/swiper/4.1.6/js/swiper.min.js"></script>

2、html部分：

<div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          lorem ipsum dolor sit amet, consectetur adipisicing elit. qui ab natus quae incidunt a officiis excepturi alias sit repellendus debitis? inventore dolorum atque quibusdam hic doloribus dignissimos ratione unde dolorem numquam quam illum nulla. nesciunt culpa sit libero nemo at quisquam modi itaque quae doloremque laborum possimus ad distinctio voluptates eius quibusdam recusandae officia! rerum quas iusto soluta dolores quaerat suscipit earum perspiciatis alias esse error consequatur dolorum incidunt excepturi perferendis ad minus amet cumque ipsum illum libero? iure dolores fugiat labore totam nihil debitis cum minus animi molestias quae. harum dolorem dolor repellendus culpa quibusdam adipisci dignissimos quas asperiores eveniet ea enim possimus animi in architecto amet quisquam officia eius est provident numquam nesciunt dolorum a ratione labore voluptas totam corporis quae. tempore mollitia saepe rem temporibus ex rerum dicta assumenda tempora asperiores at dolor sequi harum est nesciunt officiis itaque sint facere maiores nobis molestias cupiditate labore explicabo ipsa animi voluptates porro fuga iste dolores dolorem quod repudiandae a doloremque quam aliquid fugiat atque perferendis distinctio non aut reprehenderit. eius commodi deserunt aperiam deleniti laudantium esse maiores adipisci consectetur. saepe hic repellendus cumque quam dicta aperiam ipsam dolore nesciunt consequatur maxime deleniti deserunt laboriosam nostrum harum asperiores obcaecati sequi odio ipsum eius sint! repudiandae a rem commodi quam sit illo nam quae. ipsa cupiditate ipsum impedit consequatur unde dolores quibusdam veniam itaque ab cumque odit deleniti? minus modi expedita voluptatum incidunt eaque natus facere molestias debitis voluptatibus error libero voluptatem aperiam quam culpa quisquam eligendi perferendis ab fugit aliquid quibusdam soluta nam veniam eius repellat dolor architecto iste provident aliquam quas quo! provident debitis ratione corporis harum tempora nobis neque? mollitia debitis expedita nisi temporibus voluptas ratione accusamus repellendus cupiditate repellat nobis aliquid explicabo nam magni et maxime rem ipsa perspiciatis officiis dolore eligendi fugiat necessitatibus quibusdam nulla officia sint consequatur quia blanditiis laudantium eius facilis. qui nam suscipit consectetur adipisci illum eum sequi in magni voluptatibus totam sint architecto libero soluta! porro repellat fugit nisi dolorum voluptate! ea ducimus molestias rem tempora laboriosam aut blanditiis perferendis amet libero quisquam nostrum porro accusamus placeat possimus at consequatur ipsam nam ab error repellendus necessitatibus consequuntur dolor excepturi ex provident. ipsum veniam laboriosam repellendus reprehenderit dolorem similique voluptates praesentium quaerat atque consectetur eos excepturi neque debitis necessitatibus qui delectus natus quia beatae odio sint cumque possimus ab quae labore repellat iure obcaecati asperiores! fuga alias impedit quasi quisquam assumenda earum molestias mollitia illo nobis iusto qui accusamus quidem modi tempora sequi iure optio vero dolorum obcaecati similique adipisci ad perspiciatis quaerat. consequuntur tempora cupiditate quaerat ab voluptatem dolorum voluptatum et molestiae similique modi quod provident amet. perspiciatis quaerat atque laudantium excepturi! commodi recusandae ad ratione vitae harum nihil veritatis quasi fugiat animi laudantium placeat quam nesciunt provident at molestias tempore beatae incidunt. vero repellat iste perspiciatis sit quae optio illo odit excepturi minima odio asperiores similique laboriosam illum fugit corrupti. similique hic quis corrupti facere possimus minus magni necessitatibus quae nostrum error modi aliquam perferendis eum quasi itaque nobis laudantium!
        </div>
        <div class="swiper-slide">
          lorem ipsum dolor sit amet, consectetur adipisicing elit. obcaecati laudantium dolores suscipit laboriosam vitae corporis alias architecto voluptas aperiam consectetur nisi vero voluptates sed nobis assumenda doloremque officiis asperiores dolorem! cupiditate autem magnam aliquam velit necessitatibus fugiat nihil aperiam cumque eum soluta? corporis modi fugiat maxime numquam reiciendis sapiente tenetur aperiam esse ea voluptatibus autem obcaecati perferendis voluptatum minus ullam cupiditate accusantium optio. ipsa velit voluptatum facilis quasi officia accusantium numquam debitis cumque similique delectus eum blanditiis repellendus voluptas optio laudantium exercitationem earum possimus impedit mollitia quod consequatur quam enim vitae natus maiores deleniti nihil beatae. recusandae cumque eligendi ut et vero beatae laborum dolores voluptatem enim explicabo perferendis quia commodi sit placeat laudantium tempore quisquam id inventore odit sint rerum labore dolor in! optio maiores aspernatur excepturi voluptate magni cupiditate sed quibusdam fugiat veniam dolor velit ab reprehenderit alias natus nisi sequi soluta harum ut rerum eos iure possimus omnis atque fuga placeat reiciendis aperiam dolorum nihil eum esse ea similique quis repellat tenetur quas perspiciatis assumenda aliquid. ratione maxime magnam itaque minima dicta perferendis nisi in reprehenderit laudantium quisquam quae cum optio. provident vero soluta tenetur nostrum sequi iste sapiente deleniti nulla quas ducimus esse qui laborum nesciunt. labore rem unde voluptatibus veniam ipsa sequi quia illum officia voluptates minus deleniti assumenda alias nulla aliquid architecto ducimus possimus earum neque aliquam saepe ad impedit praesentium est itaque obcaecati quasi quidem in debitis quo quam id beatae minima porro placeat non totam et aspernatur tenetur dolorem cupiditate eveniet iusto. atque incidunt repellat optio praesentium obcaecati quo minus reprehenderit delectus voluptate explicabo aperiam accusantium perspiciatis consequatur et maiores saepe tempore aspernatur illo quam numquam. dolorum eos accusantium unde voluptates quo eum et aspernatur impedit repellendus ipsa dolor minima eaque nemo laudantium debitis blanditiis odit nobis in cupiditate voluptatem porro pariatur magnam iure eligendi illo recusandae quisquam nisi voluptatum mollitia autem corrupti totam consectetur rem. temporibus veniam iusto rem sed quae nostrum fuga blanditiis fugit dignissimos ullam aperiam corrupti enim ipsum modi quis soluta eveniet reiciendis ad quam explicabo possimus consectetur assumenda doloribus quia reprehenderit ea rerum expedita necessitatibus laborum nihil distinctio voluptatem dolorum nulla quaerat aspernatur saepe alias! iure excepturi impedit eius similique sed iusto consequatur obcaecati suscipit quod? similique tenetur incidunt repudiandae eius commodi quae molestiae ipsam dolorem rem eligendi esse ea veniam doloribus excepturi tempora et officia. facere quibusdam placeat ut quis perferendis inventore maxime nulla nihil sapiente magnam eos sed doloremque quam natus repudiandae praesentium reprehenderit neque laborum modi vitae voluptatibus temporibus maiores omnis ab alias consequuntur est in ipsam non consequatur? est ipsam alias aliquam voluptas recusandae possimus a laudantium sint provident corporis facere eius libero. accusamus iure atque minus laborum perspiciatis enim labore consequatur modi quia eaque blanditiis provident est quis reprehenderit fuga debitis dolorum officia. odio enim error eaque earum voluptatum ratione dolores doloribus numquam ea! repellat deserunt eius excepturi sapiente quaerat ut molestiae dolores velit commodi quo quam repellendus laborum necessitatibus animi minima voluptatum similique blanditiis perferendis aliquam corporis aperiam hic maxime aspernatur!
        </div>
        <div class="swiper-slide">
          lorem ipsum dolor sit amet, consectetur adipisicing elit. dolorem doloribus quaerat minus facere aut vel fugit saepe vero voluptatum voluptatem alias nobis doloremque eum praesentium temporibus error pariatur dolore molestias itaque corporis voluptatibus atque perferendis dolorum eius quam nostrum sint quis! cum rem hic eos laboriosam ipsam illum nam porro. inventore autem facere vel aut facilis cupiditate tempore neque omnis architecto et. facere quis sequi accusantium natus quibusdam quaerat quos aut. repudiandae ullam sunt asperiores in nulla corporis amet itaque delectus sequi necessitatibus perferendis voluptatibus et quidem? perspiciatis assumenda quia numquam fugit sint vero eum nihil autem recusandae minima et laborum. voluptatum possimus molestiae dolorem ducimus reprehenderit repellendus quisquam error harum corporis! voluptatum eligendi laudantium odit iure magni vitae sint ducimus fugit ad deserunt tenetur accusantium libero commodi nihil soluta nisi quam perferendis illo autem nam amet quas doloremque omnis voluptates praesentium blanditiis pariatur quidem dolore vel delectus impedit illum qui maxime. totam magni quaerat distinctio iure corporis ratione dolorem repellat ab consequuntur ipsa ex quidem aut nobis esse molestias tempore autem aliquid maiores enim inventore assumenda ipsum officiis quisquam id cum veniam minus nihil at ea obcaecati! blanditiis explicabo temporibus in minus eligendi! accusantium velit laboriosam qui dolores voluptas ipsum maiores minus autem quisquam natus ipsam veritatis harum libero vitae laborum. perferendis officia quod nostrum repudiandae tenetur dolorem quaerat quasi quam quo doloremque accusantium delectus consectetur cupiditate nihil animi officiis nobis dolore perspiciatis quae cum temporibus architecto ea repellendus alias sit natus magni libero voluptatum maiores a eum maxime aliquid ab consequuntur fuga illum minima laborum reiciendis voluptate accusamus. laborum modi quos voluptatibus culpa voluptatum rem similique alias cupiditate asperiores iusto dolorem possimus ab veritatis perferendis aspernatur eligendi perspiciatis in consequatur facilis est molestiae blanditiis odit quae velit odio accusantium voluptates? maiores nostrum pariatur est quos magnam excepturi modi ullam eos aliquid nisi quis similique in maxime odit alias debitis sed eius ex quam fuga doloribus cupiditate eligendi qui illo quaerat quas incidunt? harum facilis nostrum illum officia sit voluptatem ad rerum optio repudiandae aliquid amet incidunt atque ratione aperiam necessitatibus a quaerat mollitia quisquam reiciendis voluptas eius et maxime illo aspernatur ex at nam consequuntur! repudiandae fuga alias dicta iure voluptatem. maiores eos saepe ad necessitatibus beatae vitae itaque. accusantium fuga temporibus perferendis saepe numquam doloremque eveniet facilis inventore eum nam adipisci sint dolorem ullam provident corporis molestias deserunt. asperiores quisquam id adipisci quasi commodi reprehenderit architecto nihil vel eveniet inventore molestiae recusandae fugiat debitis placeat voluptate tempore mollitia labore illo eligendi distinctio facilis autem pariatur praesentium. aspernatur iusto itaque omnis quod perferendis sapiente maxime consectetur qui placeat minus numquam ullam molestiae error adipisci mollitia maiores dolorem dolores excepturi. deleniti ipsum minima libero harum corporis doloremque repudiandae dolore quis atque inventore in minus dignissimos cum velit quia error a voluptas accusantium aliquam odio illum perspiciatis eos beatae neque illo enim possimus. porro minus sed sit incidunt odio similique eum. voluptatibus vero eaque obcaecati earum quisquam odio quo id. voluptas neque cupiditate molestias modi praesentium ullam nesciunt in libero?
        </div>
        <div class="swiper-slide">
          lorem ipsum dolor sit amet, consectetur adipisicing elit. aspernatur inventore facere amet vitae soluta cupiditate ullam ab blanditiis iusto odit. velit fuga cum quam vel molestias minus ut repellat officiis hic quo magni quasi eligendi consequuntur recusandae magnam ad voluptatum sunt perspiciatis officia in nihil fugiat repudiandae ullam a corrupti sed voluptatem error distinctio sequi quisquam delectus impedit soluta ipsum natus suscipit ex placeat autem dolorum illo eaque veritatis explicabo quidem totam aperiam ducimus tempore cupiditate unde mollitia quos corporis. earum ipsa consectetur sapiente autem cum delectus ipsam omnis magnam repudiandae ea modi officiis architecto quos repellendus aspernatur nobis similique. facilis ut voluptatum voluptatibus quod dolorem illo et aperiam molestiae adipisci ab minima quas nam iure vel nemo porro eos? ut molestiae rerum perferendis recusandae odio aut laborum eaque corporis voluptatum totam quisquam vero debitis atque consectetur voluptate velit nostrum suscipit assumenda eveniet dolorem iusto quaerat tenetur deserunt quae nesciunt distinctio sequi fugiat. aliquid ratione suscipit quis fugiat porro ab voluptatibus dicta adipisci cupiditate commodi architecto earum sapiente in vel debitis tempora veniam expedita vitae reprehenderit animi neque autem voluptates quibusdam dolorum sunt sed excepturi nulla natus magni eius. sunt impedit quae officiis cum mollitia obcaecati accusantium modi asperiores! alias ex ipsam cumque accusamus quo nostrum mollitia debitis similique inventore reiciendis nulla tenetur dolor beatae consequuntur velit error magni laborum quas eum eaque! repudiandae totam numquam unde soluta eos excepturi recusandae tempore illo atque officia vitae ipsum eum itaque libero magnam nemo sed exercitationem quisquam velit pariatur consectetur natus nostrum distinctio praesentium nobis delectus architecto quia reprehenderit voluptatibus quo. debitis eaque error molestiae deserunt consequuntur ratione asperiores sed suscipit placeat adipisci sint distinctio dolores aspernatur odit ipsam quod amet voluptatem velit explicabo quisquam blanditiis maxime impedit atque dicta a hic laboriosam vel aliquam quis vitae perspiciatis harum dignissimos nemo rerum at quidem officiis corporis ad incidunt omnis repellat ab eius temporibus optio iste cum praesentium est saepe fugiat maiores! quam minima vero minus perspiciatis sint voluptatem reprehenderit. excepturi distinctio quas officia tempora magnam ducimus qui animi dolorum? et officiis autem tempora debitis voluptatum obcaecati eius unde esse dignissimos aliquam illo atque labore culpa. culpa commodi eaque vitae tempora natus est itaque sunt officia omnis assumenda voluptatem dolorem quidem esse! exercitationem excepturi ad in dignissimos dolorem quidem nesciunt aliquid labore dolor id voluptatum eveniet soluta mollitia quisquam qui repellendus saepe libero debitis ullam nihil atque quam eligendi veniam doloremque repudiandae! dolorem sequi delectus voluptas obcaecati mollitia exercitationem numquam vero sapiente voluptatum nobis esse natus reprehenderit at quaerat doloremque molestias commodi dolore qui cum aliquam. provident natus ad repellendus amet quibusdam explicabo ipsam sapiente reprehenderit nesciunt fugiat maiores libero distinctio earum voluptates debitis tempora vero corporis numquam aliquid vitae ut incidunt quos odit consectetur quo adipisci cumque eveniet molestiae qui porro non quod cum error? vel perferendis ut veniam rerum temporibus quisquam nihil consequatur odit magni dolorum ratione accusamus earum quia! ullam fugiat ex tenetur sequi ad accusantium nam beatae labore in fugit blanditiis modi dolorem nobis veritatis error cumque dolor ipsum.
        </div>
        <div class="swiper-slide">
          lorem ipsum dolor sit amet, consectetur adipisicing elit. quibusdam vero enim expedita autem deserunt quas odit sunt neque suscipit ipsum temporibus aspernatur molestiae minima maxime nam aperiam et voluptatum soluta sed esse officia quo quia nulla omnis ad tempora error. nobis porro doloremque voluptatibus repudiandae tempore mollitia sed et in nostrum adipisci optio enim quas. quas tenetur in vero repellendus inventore ipsam cumque itaque labore laboriosam libero sunt enim sequi provident numquam minima neque eveniet cupiditate magnam non nemo rem expedita et quasi iste fuga unde molestias excepturi soluta nisi vel consectetur delectus consequatur est. quisquam sint ipsa inventore magnam dolores in eaque nulla alias cum quas incidunt vel a sit quidem minus pariatur asperiores distinctio minima quam veritatis cupiditate illum similique eveniet velit accusamus ratione adipisci vero quasi et aperiam praesentium nihil amet corrupti neque dolore facilis nemo ipsam! modi id odit recusandae similique iusto officia suscipit at explicabo reprehenderit repudiandae maxime veniam quisquam natus delectus amet voluptatibus temporibus quis vitae harum eos. vero reiciendis nobis facere voluptatem quisquam deserunt beatae accusamus laborum illo blanditiis maiores rem voluptatibus cupiditate eos odio odit esse suscipit iure aliquam dignissimos sint nihil cumque dolorum impedit possimus ipsa sapiente numquam recusandae quae. tempore quibusdam vero qui sed placeat natus nobis ex neque modi totam sit esse corporis quia officiis nulla similique voluptas aperiam quaerat magnam ad. dignissimos voluptates inventore quia laboriosam. blanditiis illo dolorum libero porro veniam maxime excepturi delectus pariatur doloremque unde. quasi reprehenderit eligendi ut nobis soluta possimus enim! esse magnam doloribus minus et repellendus eligendi eum enim odio mollitia rem porro rerum in dicta tempore ipsa quae aperiam deserunt quaerat ex deleniti voluptas consectetur ab tenetur culpa nostrum eaque alias vitae quibusdam commodi impedit neque exercitationem natus inventore laborum dolorem hic eos beatae voluptatum atque quis aspernatur temporibus. veniam incidunt rerum voluptates laborum nobis maxime quisquam ad sed minima a ratione repellendus est quibusdam rem nisi aliquam velit saepe cupiditate recusandae error vitae fuga nam esse illo nostrum tenetur fugit sapiente. accusantium assumenda quia ad soluta deleniti sed dolores reiciendis explicabo iste aperiam saepe eum architecto quo ratione atque id obcaecati ipsam voluptas molestias aut natus fugit consectetur quas? nisi eveniet cumque quidem non esse vel consequatur deleniti atque fugiat ducimus repudiandae ex aliquam repellat earum dolore facere ipsam nostrum et veniam iste nobis inventore placeat ipsa voluptate numquam sit deserunt impedit id beatae culpa officiis quam natus libero ipsum pariatur mollitia reiciendis! ea nesciunt nisi dolor officiis minima eligendi ratione corporis perspiciatis ut vero! porro magnam fugit aliquid voluptatibus architecto rem voluptatem dicta molestias eum esse quis libero nulla quae corrupti vero dolorem voluptate earum. possimus fuga dolores fugiat autem iure maiores eligendi dicta molestias pariatur perspiciatis dolorum a laudantium natus necessitatibus nostrum? repellendus architecto corrupti nisi optio dicta quas harum vitae sapiente consequuntur alias omnis temporibus perferendis exercitationem nesciunt magnam ex et hic eaque consequatur ab natus ipsa expedita dolore minima deserunt odit corporis laboriosam non voluptatem rerum suscipit ut obcaecati rem aut ratione excepturi aliquid facilis veniam.
        </div>
      </div>
      <div class="swiper-scrollbar"></div>
    </div>

注意这个‘.swiper-scrollbar'不要漏了，他是滚动条。

另外这个文本内容是随机英文，快捷方式是lorem+数字，按tab健。

3、css部分：

html,
body {
  position: relative;
  height: 100%;
}
body {
  background: #fff;
  font-family: helvetica neue, helvetica, arial, sans-serif;
  color: #000;
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: 100%;
  cursor: default;
}
.swiper-slide {
  font-size: 20px;
  height: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  line-height: 2;
  text-indent: 2em;
}

4、js部分：

var swiper = new swiper('.swiper-container', {
  direction: 'vertical',
  slidesperview: 'auto',
  freemode: true,
  freemodemomentumratio : 0.2,
  scrollbar: {
    el: '.swiper-scrollbar',
  },
  mousewheel: true,
});

swiper的*模式，允许滑动组件不必贴合边缘，freemodemomentumratio是移动惯量，单位为s，值越大，松开后滑动越久，设置false可关闭。

感兴趣的朋友还可以使用本站如下在线工具测试运行效果：

在线html/css/javascript前端代码调试运行工具：
http://tools.jb51.net/code/webcoderun

在线html/css/javascript代码运行工具：
http://tools.jb51.net/code/htmljsrun

更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript文件与目录操作技巧汇总》、《javascript查找算法技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》、《javascript错误与调试技巧总结》及《javascript数学运算用法总结》

希望本文所述对大家javascript程序设计有所帮助。