我在使用 Bootstrap 的 CodeIgniter 上使用 wow.js 时遇到问题，只有视口(viewport)中的元素显示而不是向下滚动所有元素都在那里但可见性等于隐藏并且不会改变它。
问题是我在一个可滚动的部分。
更新
我找到了解决方法 here ，因此为此目的，我使用 wow.js 制作动画，使用 isInViewport.min.js 制作触发。
我的头:
<head>
<link rel="stylesheet" href="css/animate.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script>
<script src="js/wow.min.js"></script>
</head>
我的模板:
<section id="scrollab" class="scrollable w-f-md" style="position:fixed; z-index:1">
<div id="target" style="height:100%;">
<?php getPage($page); ?>
</div> <!-- /target -->
</section>
我的 View :(这是页面目标)
<!DOCTYPE html>
<script src="isInViewport.min.js"></script>
<div class="row row-sm padder-lg ">
<?php
foreach ($top->feed->entry as $key => $value)
{
$value->title->label = str_ireplace( "- ".$value->artist->label, "", $value->title->label);
if($key >= $this->config->item("items_top"))
continue;
$image = $value->image[2]->label;
if($image == '')
$image = base_url()."assets/images/no-cover.png";
$image = str_ireplace("170x170", "200x200", $image);
?>
<div class="wow bounceInUp col-sm-4" style="visibility:hidden;">
<div class="item " >
<div class="pos-rlt ">
<figure class="effect-main-2">
<img class="img-full" src="<?php echo $image; ?>"/>
<figcaption>
<div style="overflow:hidden;"></div>
<div class="item-overlay opacity">
<span class="text-center">
<i class="icon-control-play"></i>
</span>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
<script>
new WOW().init();
</script>
然后，在与建议相同的 View 中，我添加了这个脚本:
<script>
var scrollable = $('#scrollab');
scrollable.on('scroll.wow', function(){
scrollable.find('.wow:not(.animated):in-viewport').removeAttr('style').addClass('animated');
}));
</script>
</div>
现在一切正常，谢谢大家。
最佳答案
我想我能够重现并解决您的问题。基本上 :in-viewport 不包含在 jquery 伪选择器中。所以你需要一个像http://www.appelsiini.net/projects/viewport这样的插件使其能够正常工作。还要确保此插件已加载到您的页面中。
这里是 :in-viewport 的工作示例 http://jsfiddle.net/tfLp17oz/
关于javascript - 在可滚动部分的视口(viewport)中，如何更改元素的样式属性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29460729/