Question

我正在开发一个项目，我正在借助swiper滑块设计一个页面。在我的页面中，我有三个来自swiper滑块的滑块，用于水平滑动。每个swiper都包含动态内容。在页面上加载第一个滑块位于视口中，当垂直滚动时，它会卡住。水平滑动一次后，Verticle滚动现在可以正常工作。我尝试使用auto-height: true来解决这个问题。但是在应用上述内容时，我在留下的内容上留下了一个巨大的空白区域，我猜这三个内容中的最大高度防滑板是这样的。

JS： -

swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationType:'custom',        
        paginationCustomRender: function (swiper, current, total) {
            if(current==1){
                if(!$("#matches").hasClass("active")){
                    $("#matches").addClass("active");
                    $("#table").removeClass("active");
                    $("#latest").removeClass("active");
                    if($(document).find(".ns_position").length > 0){
                        $('html,body').animate({scrollTop: $(".ns_position").offset().top-130}, 'fast');
                    }
                }
            }else if(current==2){
                if(!$("#table").hasClass("active")){
                    $("#table").addClass("active");
                    $("#matches").removeClass("active");
                    $("#latest").removeClass("active");
                    $(window).scrollTop(0);
                }
            }else if(current==3){
                if(!$("#latest").hasClass("active")){
                    $("#latest").addClass("active");
                    $("#matches").removeClass("active");
                    $("#table").removeClass("active");  
                    $(window).scrollTop(0);
                }
            }   

        },
        lazyLoading:true,
        autoHeight:true

    });

HTML代码： -

<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
            <div>
        <div>
<div>

Answer 1

我通过自定义css解决了这个问题。

使用css： -

高度：100％，溢出：自动滑动滑块，我被卡在垂直滚动中。

滑块滑块垂直滚动卡在滑块1上，但在水平滑动一次后效果很好

1 个答案: