我在使用 Bootstrap 的 CodeIgniter 上，我遇到了 wow.js 问题，只显示视口(viewport)中的元素，而不是向下滚动所有元素都在那里，但可见性等于隐藏并且不会改变它。
问题是我在一个可滚动的部分。
更新
我找到了一个解决方法 here ，因此为此我使用了 wow.js 动画和 isInViewport.min.js 触发。
我的 head :
<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>
我的
template : <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 not 包含在 jquery 伪选择器中。所以你需要一个像 http://www.appelsiini.net/projects/viewport 这样的插件才能正常工作。还要确保此插件已加载到您的页面中。
这是 :in-viewport http://jsfiddle.net/tfLp17oz/ 的一个工作示例
关于javascript - 当在可滚动部分的视口(viewport)中时，如何更改元素的样式属性？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29460729/