移动端上下滑动swiper,第二个页面内容大于屏幕尺寸，现在的问题是，超出部分无法通过滚动条下滑查看。

最新推荐文章于 2024-05-17 15:36:38 发布

wait9166

最新推荐文章于 2024-05-17 15:36:38 发布

阅读量7.5k

点赞数 1

本文链接：https://blog.csdn.net/wait9166/article/details/73292013

版权

相关链接：

 
 https://segmentfault.com/q/1010000005605451 

 
 上下滑动的swiper，有两页，第二个slider是列表页，内容会超出屏幕高度，现在的问题是，超出部分无法通过滚动条下滑查看。 

 
 想要的效果是，第二页slider不受影响，出现滚动，正常下滑查看内容。 

 
 （如果禁用swiper某个方向的移动，会导致无法滑动到上一页）
 
 
 
 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
         <link rel="stylesheet" type="text/css" href="css/index.css"/>
         <!--swiper-->
         <link rel="stylesheet" href="css/swiper-3.4.2.min.css">    
     </head>
     <body>
         <div class="swiper-container swiper-container-v">
             <div class="swiper-wrapper">
                 <div class="swiper-slide">Vertical Slide 1</div>
                 <div class="swiper-slide second">
                     <div class="swiper-container swiper-container-scrollbar">
                         <div class="swiper-wrapper">
                              <div class="swiper-slide">
                                 <h3>title</h3>
                                 <p>this is a p tag</p>
                                   .....
                                   .....
                                   .....
                             </div>
                         </div>
                     <div class="swiper-scrollbar"></div>
                 </div>
             </div>
             <div class="swiper-slide">Vertical Slide 3</div>
             <div class="swiper-slide">Vertical Slide 4</div>
         </div>
     </div>
        <script src="js/swiper-3.4.2.min.js"></script>
        <script>        
             
            var swiperV = new Swiper('.swiper-container-v', {
              direction: 'vertical'
             });
 
            var swiperScrollbar = new Swiper('.swiper-container-scrollbar', {
              scrollbar: '.swiper-container-scrollbar .swiper-scrollbar',
              direction: 'vertical',
              slidesPerView: 'auto',
              mousewheelControl: true,
              freeMode: true,
              nested: true
             });
       </script>
        
     </body>
 </html>
 
 
  

wait9166

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
移动端上下滑动swiper,第二个页面内容大于屏幕尺寸，现在的问题是，超出部分无法通过滚动条下滑查看。

相关链接：https://segmentfault.com/q/1010000005605451上下滑动的swiper，有两页，第二个slider是列表页，内容会超出屏幕高度，现在的问题是，超出部分无法通过滚动条下滑查看。想要的效果是，第二页slider不受影响，出现滚动，正常下滑查看内容。（如果禁用swiper某个方向的移动，会导致无法滑动到上一页）
复制链接

扫一扫