Barba JS页面上缺少滚动条

时间:2020-09-16 16:31:49

标签: javascript wordpress

BarbaJS有一些奇怪的问题。加载内容且内容不适合Y轴时,应该会出现滚动条,但在我的情况下,滚动条不会出现在用户的屏幕上。我尝试了一切,添加了机车库,通过jQuery添加了滚动条,但到目前为止没有任何效果……顺便说一下,我正在使用Wordpress来做到这一点。哦,我几乎忘记了,当用户在新闻页面上并刷新页面时,滚动条就会出现...这个问题的解决方案吗?

这是我的JS代码:

barba.init({
    debug: true,
    transitions: [{
      name: 'opacity-transition',
      leave(data) {
        return gsap.to(data.current.container, {
          opacity: 0,
          duration: .7,
        });
      },
      enter(data) {
        gsap.timeline({ delay: 1 }).from(data.next.container, {
          opacity: 0,
          duration: 1
        });
      }
    }],
    views: [{
        namespace: 'index',
        beforeEnter() {
            jQuery('#hp-themes').owlCarousel({
                stopOnHover: true,
                mouseDrag: false,
                touchDrag: true,
                loop: true,
                items: 1,
                lazyLoad:true,
               /* animateOut: "fadeOut",
                animateIn: "fadeIn",*/
                margin: 0,
                nav: true,
                dots: false,
                autoplaySpeed: 500, 
                smartSpeed: 500,
                autoplayTimeout: 500,
                onDragged: function(e) {
                  jQuery(e.target).hide().fadeIn();
                }
            });
            
            jQuery("body").on('click', '.owl-next', function(){
                console.log("kliknute");
        
                var title = jQuery('.owl-item.active .next-item-title').attr("data-title");
                
                jQuery(".nav-next-title").html(title);
            });
        
            jQuery("body").on('click', '.owl-prev', function(){
                console.log("kliknute");
        
                var title = jQuery('.owl-item.active .next-item-title').attr("data-title");
                
                jQuery(".nav-next-title").html(title);
            });
        },
        afterEnter() {
            jQuery('.content-wrap').css("overflow-y", "scroll");
        }
    },
    {
        namespace: 'kontakt',
        beforeEnter() {
          
        },
        afterEnter() {
            $("ul#main-menu > li#menu-item-51 > a").addClass("active");
            $("ul#main-menu > li#menu-item-865 > a").removeClass("active");
            $("ul#main-menu > li#menu-item-54 > a").removeClass("active"); 
            $("ul#main-menu > li#menu-item-892 > a").removeClass("active"); 
            $("ul#main-menu > li#menu-item-893 > a").removeClass("active");
        }  
    },
    {
        namespace: 'novinky',
        beforeEnter() {
            
        },
        afterEnter() {
            $("ul#main-menu > li#menu-item-865 > a").addClass("active");
            $("ul#main-menu > li#menu-item-54 > a").removeClass("active"); 
            $("ul#main-menu > li#menu-item-892 > a").removeClass("active"); 
            $("ul#main-menu > li#menu-item-893 > a").removeClass("active");
            $("ul#main-menu > li#menu-item-51 > a").removeClass("active");     
        }  
    },
    {
        namespace: 'o-nas',
        beforeEnter() {
            
        },
        afterEnter() {
            $("ul#main-menu > li#menu-item-54 > a").addClass("active");
            $("ul#main-menu > li#menu-item-865 > a").removeClass("active");
            $("ul#main-menu > li#menu-item-892 > a").removeClass("active"); 
            $("ul#main-menu > li#menu-item-893 > a").removeClass("active");
            $("ul#main-menu > li#menu-item-51 > a").removeClass("active");     
        }  
    },
    {
        namespace: 'udalosti',
        beforeEnter() {
            
        },
        afterEnter() {
            $("ul#main-menu > li#menu-item-892 > a").addClass("active");
            $("ul#main-menu > li#menu-item-54 > a").removeClass("active");
            $("ul#main-menu > li#menu-item-865 > a").removeClass("active");
            $("ul#main-menu > li#menu-item-893 > a").removeClass("active");
            $("ul#main-menu > li#menu-item-51 > a").removeClass("active");      
        }  
    },
    {
        namespace: 'clanky',
        beforeEnter() {
            
        },
        afterEnter() {
            $("ul#main-menu > li#menu-item-893 > a").addClass("active");
            $("ul#main-menu > li#menu-item-892 > a").removeClass("active");
            $("ul#main-menu > li#menu-item-54 > a").removeClass("active");
            $("ul#main-menu > li#menu-item-865 > a").removeClass("active");
            $("ul#main-menu > li#menu-item-51 > a").removeClass("active");       
            /* same height of article items */
            var equalHeight = function () {
                jQuery('.articles .item .pi-name,.programs-list.row .item .pi-desc,#zone-programs-nearest.item .pi-desc,.news-list .item-wrap .item .item-top .ni-desc').css('height', 'auto');
                var maxHeight = 0;
                jQuery('.articles .item .pi-name,.programs-list.row .item .pi-desc,#zone-programs-nearest.item .pi-desc,.news-list .item-wrap .item .item-top .ni-desc').each(function () {
                    if (jQuery(this).height() > maxHeight) {
                        maxHeight = jQuery(this).height();
                    }
                });
                jQuery('.articles .item .pi-name,.programs-list.row .item .pi-desc,#zone-programs-nearest.item .pi-desc,.news-list .item-wrap .item .item-top .ni-desc').css('height', maxHeight);
            };
            equalHeight();
            jQuery('.articles').resize(function () {
                equalHeight();
            }); 
        }  
    },
    {
        namespace: 'kategorie',
        beforeEnter() {
            
        },
        afterEnter() {
            /* same height of article items */
            var equalHeight = function () {
                jQuery('.articles .item .pi-name,.programs-list.row .item .pi-desc,#zone-programs-nearest.item .pi-desc,.news-list .item-wrap .item .item-top .ni-desc').css('height', 'auto');
                var maxHeight = 0;
                jQuery('.articles .item .pi-name,.programs-list.row .item .pi-desc,#zone-programs-nearest.item .pi-desc,.news-list .item-wrap .item .item-top .ni-desc').each(function () {
                    if (jQuery(this).height() > maxHeight) {
                        maxHeight = jQuery(this).height();
                    }
                });
                jQuery('.articles .item .pi-name,.programs-list.row .item .pi-desc,#zone-programs-nearest.item .pi-desc,.news-list .item-wrap .item .item-top .ni-desc').css('height', maxHeight);
            };
            equalHeight();
            jQuery('.articles').resize(function () {
                equalHeight();
            }); 
        }  
    },
    {
        namespace: 'projekty',
        beforeEnter() {
    
        },
        afterEnter() {
            jQuery("#accordion").accordion();
            $("ul#main-menu > li#menu-item-54 > a").addClass("active");
            $("ul#main-menu > li#menu-item-865 > a").removeClass("active");
            $("ul#main-menu > li#menu-item-892 > a").removeClass("active"); 
            $("ul#main-menu > li#menu-item-893 > a").removeClass("active");
            $("ul#main-menu > li#menu-item-51 > a").removeClass("active");
        }  
    },]
});

这是我遇到此问题的新闻页面:

<?php /* Template Name: Novinky */ ?>
<?php get_header(); ?>


<main data-barba="container" data-barba-namespace="novinky">
<section class="content-wrap p-top">
            <div class="content" id="myContent">
                <div class="container">
                
                    
                    <div class="row news-list news-main-page">
                        <?php

                        global $paged;
                        $curpage = $paged ? $paged : 1;
                        $args = array(
                            'post_type' => 'novinka',
                            'tax_query' => array(
                                array(
                                    'taxonomy' => 'kategoria-novinky',
                                    'field'    => 'term_id',
                                    'terms'    => '18',
                                ),
                            ),
                            'orderby' => 'post_date',
                            'posts_per_page' => 12,
                            'paged' => $paged
                        );

                        $query = new WP_Query($args);
                        if($query->have_posts()) : while ($query->have_posts()) : $query->the_post();

                        ++$posts_count;

                        $farba = get_field("clanok_farba");
                        ?>
                        <div class="col-lg-4 col-md-6 col-sm-6 item-wrap">
                            <div class="item">
                                <div class="item-top">
                                    <div class="ni-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
                                    <div class="ni-desc"><?php the_excerpt(); ?></div>
                                </div>
                                <?php 
                                if ( $farba ) {
                                    ?>
                                    <div class="item-bottom" style="background-image: linear-gradient(0deg, <?php echo $farba ?> 0%, rgba(255, 255, 255, 0) 75%), url('<?php the_post_thumbnail_url(); ?>')">
                                        <a href='<?php the_permalink(); ?>' class="ni-more cta"><span><?php _e( 'Čítaj viac', 'yogapit_read-more' )?></span></a>
                                    </div>
                                    <?php
                                } else {
                                    ?>
                                    <div class="item-bottom" style="background-image: url('<?php the_post_thumbnail_url(); ?>')">
                                        <a href='<?php the_permalink(); ?>' class="ni-more cta"><span><?php _e( 'Čítaj viac', 'yogapit_read-more' )?></span></a>
                                    </div>
                                    <?php
                                }                                
                                ?>
                                
                            </div>                   
                        </div>
                        <!-- /article -->

                        <?php endwhile; 

                        if ( $query->max_num_pages > 1 )  {

                            echo '
                            </div>
                            <div id="wp_pagination" class="pager-wrap pager-novinky">
                                <ul class="pager">
                                <li class="page-prev"><a class="previous page button" href="'.get_pagenum_link(($curpage-1 > 0 ? $curpage-1 : 1)).'"></a></li>';
                                for($i=1;$i<=$query->max_num_pages;$i++)
                                    echo '<li><a class="'.($i == $curpage ? 'active ' : '').'button" href="'.get_pagenum_link($i).'">'.$i.'</a></li>';
                                echo '
                                <li class="page-next"><a class="next page button" href="'.get_pagenum_link(($curpage+1 <= $query->max_num_pages ? $curpage+1 : $query->max_num_pages)).'"></a></li>
                            </ul></div>
                            ';
                            
                        }
                        wp_reset_postdata();

                        ?>

                        <?php else: ?>

                            <!-- article -->
                            <article>
                                <h2><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h2>
                            </article>
                            <!-- /article -->

                        <?php endif; 
                        wp_reset_query();
                        ?>
                    </div>           
                </div> 
            </div>
        </section>
</main>
<?php get_footer(); ?>

0 个答案:

没有答案