swiper.js中内容超出一屏可滑动

最新推荐文章于 2025-07-03 11:42:32 发布

原创最新推荐文章于 2025-07-03 11:42:32 发布 · 8.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#swiper.js #css3 #fullpage #超出一屏

前端开发专栏收录该内容

121 篇文章

订阅专栏

本文介绍了解决Swiper轮播图在垂直滑动时，最后一屏内容超出屏幕范围导致用户体验不佳的问题。提供了三种解决方案：禁用触摸控制、使用特定样式阻止滑动以及采用官方示例中的内嵌滚动方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码参考:

https://github.com/nolimits4web/Swiper/issues/1467

https://jsfiddle.net/8fgphstx/1/

方法一:

如果是最后一页超出屏幕可以禁止slide滑动:

mySwiper.disableTouchControl();

执行上行代码后,最后一页可以滚动,但是页面将不可切换,只能使用扩展API函数例如slideNext() 或slidePrev()或slideTo()等改变slides滑动。

可以自己写代码判断是否滚动到页面顶部或底部,然后使用代码进行调转并恢复滑动:

mySwiper.enableTouchControl();

方法二:

还有一种曲线救国的方法是使用swiper-no-swiping的样式,滑动使用该样式的元素不会对slide造成影响

方法三:

也可以参考官方案例http://www.swiper.com.cn/demo/99-inner-scroll.html,将需要滚动的页面使用swiper代替

<!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>
        /*.music{
            position: absolute;
            z-index: 1000;
            right: 0px;
            top: 0px;
            padding: 10px;
            width: 25px;
            height: 25px;
        }
        .music .music-btn {
            display: block;
            padding-left: 1px;
            width: 25px;
            height: 25px;
            background-image: url(css/img/music-1.png);
            background-size: 100% 100%;
        }
        .music .music-btn.play {
            background-image: url(css/img/music-0.png);
        }*/
        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>
    <!-- <div id="music" class="music">
        <a class="music-btn"></a>
    </div>
    <audio id="audiobg" src="media/bg.mp3" preload="true" style="width:0px;height:0px;" autoplay="true" loop="true"></audio> -->
    <!-- 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>