多的不说，项目需要，然后直接去找了一个案例，贴出来分享给大家，亲测是有效的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>免费定制专属行程</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<link rel="stylesheet" type="text/css" href="">
<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-container {
width: 100%;
height: 100%;
}
.swiper-slide{
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
overflow: auto
}
</style>
<link href="http://cdn.bootcss.com/Swiper/3.4.1/css/swiper.min.css" rel="stylesheet">
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique libero reprehenderit facilis. Pariatur illum repellat distinctio consectetur, minima ad aspernatur odio et obcaecati a unde, accusamus architecto minus, dicta consequatur!</p>
<p>Illo laboriosam deserunt a quas tempore perspiciatis voluptates dignissimos sunt accusamus, quod quae pariatur impedit rerum, saepe, mollitia cum error consectetur officiis ipsum beatae ut. Eveniet, maxime provident? Mollitia, ullam.</p>
<p>Nesciunt magni, voluptatum omnis, assumenda maiores harum vel ipsa illo nostrum a non quos optio repellat tenetur ducimus dolorem placeat! Minima cum, animi ullam asperiores qui modi perferendis, earum quis!</p>
<p>Sint unde corporis, quia ducimus reprehenderit nostrum facilis itaque temporibus corrupti. Explicabo et illo itaque sequi placeat eos architecto, sed accusantium nostrum nihil autem impedit obcaecati voluptatum minima quidem saepe.</p>
<p>Facilis in aliquam incidunt magni! Neque eos consequatur recusandae sint labore perspiciatis deleniti commodi beatae eveniet omnis, itaque expedita voluptates facere rerum distinctio, aperiam dolores totam doloremque corrupti vitae quibusdam!</p>
<p>Nemo natus laudantium iusto harum vero praesentium earum rerum corporis pariatur, voluptas, doloribus ipsa vitae assumenda maxime cum magni cumque alias amet laborum libero hic. Eaque accusamus, ipsa assumenda. Dolores.</p>
<p>Fuga minima perferendis deleniti sed repellendus totam suscipit. Aspernatur laboriosam debitis nisi harum in. Harum, ipsa consequuntur sequi natus, esse quod quaerat qui eligendi nulla iusto magnam fuga iste laudantium.</p>
<p>In dolorum, aspernatur eius labore? Voluptates eos dolore id quidem, at asperiores facere ea impedit officiis vero aspernatur. Nobis itaque assumenda recusandae, facere a ab. Unde fugiat quisquam, libero suscipit.</p>
<p>Facere maiores dicta, recusandae sit voluptates dolorem. Veritatis quam iure, commodi consectetur sunt, eligendi possimus cupiditate. Cumque quibusdam veritatis, autem! Eligendi odio eos libero adipisci, iste sapiente unde. Animi, ea!</p>
<p>Asperiores, dolorum itaque odio exercitationem, nemo officia, atque ex excepturi, accusantium a repellendus? Rerum minima, numquam ipsa unde aperiam totam, delectus distinctio quos obcaecati odit, maiores ipsam inventore beatae ullam?</p>
<p>Ut perspiciatis enim, voluptatibus laborum, maiores fugiat sequi dicta quam quos in nam distinctio sed corporis obcaecati nesciunt tenetur mollitia, rem eligendi nulla quasi saepe animi pariatur aspernatur! Tempora, provident.</p>
<p>Non tempora dolore, laboriosam doloremque earum quibusdam, quae ipsam harum, repudiandae explicabo nihil nam aut at. Quisquam qui reiciendis illum, dicta nesciunt aliquid atque earum, odit repellendus debitis sapiente dolores.</p>
<p>Ad, atque, sint. Nihil ex doloremque, numquam voluptatum qui, explicabo. Quisquam, esse at voluptate debitis perspiciatis velit dolorem accusamus voluptatum dicta, neque numquam sint, harum quis officiis rem autem dolore.</p>
<p>Ab dolorem pariatur libero recusandae ratione aut nihil, sint quae ipsa. Nobis quidem sequi consequatur porro tempora suscipit debitis cum explicabo corrupti neque, magnam dicta sapiente perspiciatis accusamus! Nulla, blanditiis.</p>
<p>Sit quas magnam placeat, modi recusandae id quod voluptatibus voluptatem. Sit, nihil, vitae. Dolorem ducimus dolores tenetur. Omnis impedit similique laboriosam, dolor unde voluptas animi iure vel. Facilis odit, reiciendis.</p>
<p>Voluptas optio iusto autem molestias soluta maiores amet aut fuga ipsa inventore, reprehenderit quis voluptatem cum nihil aliquam rerum incidunt perferendis est accusantium labore, rem iure, necessitatibus quod voluptatum. Incidunt.</p>
<p>Non ipsa, optio deserunt. Minus numquam omnis facere atque dolore suscipit eius expedita delectus dignissimos molestiae dicta inventore illo, quaerat beatae error recusandae quas sunt labore quae! Ex quidem, sed.</p>
<p>Placeat veniam totam, error neque, dolore dolores, pariatur rerum voluptatibus recusandae reiciendis dicta itaque nisi ratione fugiat illum perferendis eaque. Accusamus dolorem, autem mollitia sit modi vitae numquam, perferendis facere.</p>
<p>Voluptates quos recusandae pariatur quas beatae ad at odit, est rerum sint repudiandae adipisci sapiente ipsam doloremque corporis excepturi harum magnam eaque eveniet, fuga repellendus accusantium incidunt dolor perferendis? Suscipit.</p>
<p>Eaque reprehenderit assumenda expedita sapiente error consequuntur ullam quisquam ab, placeat sit amet optio, ad corporis unde aliquam eius harum consequatur, quasi quae mollitia debitis aspernatur. Ipsam sed rerum perspiciatis.</p>
</div>
<div class="swiper-slide">Slide 2
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique libero reprehenderit facilis. Pariatur illum repellat distinctio consectetur, minima ad aspernatur odio et obcaecati a unde, accusamus architecto minus, dicta consequatur!</p>
<p>Illo laboriosam deserunt a quas tempore perspiciatis voluptates dignissimos sunt accusamus, quod quae pariatur impedit rerum, saepe, mollitia cum error consectetur officiis ipsum beatae ut. Eveniet, maxime provident? Mollitia, ullam.</p>
<p>Nesciunt magni, voluptatum omnis, assumenda maiores harum vel ipsa illo nostrum a non quos optio repellat tenetur ducimus dolorem placeat! Minima cum, animi ullam asperiores qui modi perferendis, earum quis!</p>
<p>Sint unde corporis, quia ducimus reprehenderit nostrum facilis itaque temporibus corrupti. Explicabo et illo itaque sequi placeat eos architecto, sed accusantium nostrum nihil autem impedit obcaecati voluptatum minima quidem saepe.</p>
<p>Facilis in aliquam incidunt magni! Neque eos consequatur recusandae sint labore perspiciatis deleniti commodi beatae eveniet omnis, itaque expedita voluptates facere rerum distinctio, aperiam dolores totam doloremque corrupti vitae quibusdam!</p>
<p>Nemo natus laudantium iusto harum vero praesentium earum rerum corporis pariatur, voluptas, doloribus ipsa vitae assumenda maxime cum magni cumque alias amet laborum libero hic. Eaque accusamus, ipsa assumenda. Dolores.</p>
<p>Fuga minima perferendis deleniti sed repellendus totam suscipit. Aspernatur laboriosam debitis nisi harum in. Harum, ipsa consequuntur sequi natus, esse quod quaerat qui eligendi nulla iusto magnam fuga iste laudantium.</p>
<p>In dolorum, aspernatur eius labore? Voluptates eos dolore id quidem, at asperiores facere ea impedit officiis vero aspernatur. Nobis itaque assumenda recusandae, facere a ab. Unde fugiat quisquam, libero suscipit.</p>
<p>Facere maiores dicta, recusandae sit voluptates dolorem. Veritatis quam iure, commodi consectetur sunt, eligendi possimus cupiditate. Cumque quibusdam veritatis, autem! Eligendi odio eos libero adipisci, iste sapiente unde. Animi, ea!</p>
<p>Asperiores, dolorum itaque odio exercitationem, nemo officia, atque ex excepturi, accusantium a repellendus? Rerum minima, numquam ipsa unde aperiam totam, delectus distinctio quos obcaecati odit, maiores ipsam inventore beatae ullam?</p>
<p>Ut perspiciatis enim, voluptatibus laborum, maiores fugiat sequi dicta quam quos in nam distinctio sed corporis obcaecati nesciunt tenetur mollitia, rem eligendi nulla quasi saepe animi pariatur aspernatur! Tempora, provident.</p>
<p>Non tempora dolore, laboriosam doloremque earum quibusdam, quae ipsam harum, repudiandae explicabo nihil nam aut at. Quisquam qui reiciendis illum, dicta nesciunt aliquid atque earum, odit repellendus debitis sapiente dolores.</p>
<p>Ad, atque, sint. Nihil ex doloremque, numquam voluptatum qui, explicabo. Quisquam, esse at voluptate debitis perspiciatis velit dolorem accusamus voluptatum dicta, neque numquam sint, harum quis officiis rem autem dolore.</p>
<p>Ab dolorem pariatur libero recusandae ratione aut nihil, sint quae ipsa. Nobis quidem sequi consequatur porro tempora suscipit debitis cum explicabo corrupti neque, magnam dicta sapiente perspiciatis accusamus! Nulla, blanditiis.</p>
<p>Sit quas magnam placeat, modi recusandae id quod voluptatibus voluptatem. Sit, nihil, vitae. Dolorem ducimus dolores tenetur. Omnis impedit similique laboriosam, dolor unde voluptas animi iure vel. Facilis odit, reiciendis.</p>
<p>Voluptas optio iusto autem molestias soluta maiores amet aut fuga ipsa inventore, reprehenderit quis voluptatem cum nihil aliquam rerum incidunt perferendis est accusantium labore, rem iure, necessitatibus quod voluptatum. Incidunt.</p>
<p>Non ipsa, optio deserunt. Minus numquam omnis facere atque dolore suscipit eius expedita delectus dignissimos molestiae dicta inventore illo, quaerat beatae error recusandae quas sunt labore quae! Ex quidem, sed.</p>
<p>Placeat veniam totam, error neque, dolore dolores, pariatur rerum voluptatibus recusandae reiciendis dicta itaque nisi ratione fugiat illum perferendis eaque. Accusamus dolorem, autem mollitia sit modi vitae numquam, perferendis facere.</p>
<p>Voluptates quos recusandae pariatur quas beatae ad at odit, est rerum sint repudiandae adipisci sapiente ipsam doloremque corporis excepturi harum magnam eaque eveniet, fuga repellendus accusantium incidunt dolor perferendis? Suscipit.</p>
<p>Eaque reprehenderit assumenda expedita sapiente error consequuntur ullam quisquam ab, placeat sit amet optio, ad corporis unde aliquam eius harum consequatur, quasi quae mollitia debitis aspernatur. Ipsam sed rerum perspiciatis.</p>
</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/Swiper/3.4.1/js/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
});
var startScroll, touchStart, touchCurrent;
swiper.slides.on('touchstart', function (e) {
startScroll = this.scrollTop;
touchStart = e.targetTouches[0].pageY;
}, true);
swiper.slides.on('touchmove', function (e) {
touchCurrent = e.targetTouches[0].pageY;
var touchesDiff = touchCurrent - touchStart;
var slide = this;
var onlyScrolling =
( slide.scrollHeight > slide.offsetHeight ) &&
(
( touchesDiff < 0 && startScroll === 0 ) ||
( touchesDiff > 0 && startScroll === ( slide.scrollHeight - slide.offsetHeight ) ) ||
( startScroll > 0 && startScroll < ( slide.scrollHeight - slide.offsetHeight ) )
);
if (onlyScrolling) {
e.stopPropagation();
}
}, true);
</script>
</body>
</html>
