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(); ?>