如何在可滚动部分的视口中更改项目的样式属性？
Posted
技术标签:
【中文标题】如何在可滚动部分的视口中更改项目的样式属性？【英文标题】：How do I change the style property of items when are in viewport on scrollable section? 【发布时间】：2015-06-10 05:28:46 【问题描述】：我在使用 Bootstrap 的 CodeIgniter 时遇到了wow.js 的问题，只有视口中的项目才会在向下滚动时显示，所有项目都在那里，但可见性等于隐藏并且不会改变它。
问题是我在一个可滚动的部分。
更新
我找到了一种解决方法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>
然后，按照建议的相同视图，我添加了这个脚本：
<script>
var scrollable = $('#scrollab');
scrollable.on('scroll.wow', function()
scrollable.find('.wow:not(.animated):in-viewport').removeAttr('style').addClass('animated');
));
</script>
</div>
现在一切正常，谢谢大家。
【问题讨论】：
阅读此issue 我猜可能是脚本不允许调用 wow 的滚动处理程序。您可以尝试删除使用滚动的插件，例如网站上的自定义滚动条。最好是在their 页面上创建一个新问题。 我试了一下 (jsfiddle.net/tfLp17oz)，一切似乎都运行良好。为了帮助您诊断问题出在哪里，请尝试以下一些方法：1) 确保页面加载时没有 JS 错误，并且当部分滚动时 2) 确保执行最后一个脚本（带有 scrollabe 修复）在 WOW.init 之后。 3) 添加“console.log('test');”在“scrollable.find”之后 4）删除#scrollab 的“overflow:scroll”并确保动画正常工作。这样我们就可以更接近于发现问题了。 您的错误表明未加载 inviewport js 在我的 jsfiddle 示例中，我使用这个插件 appelsiini.net/projects/viewport 它工作正常，它应该可以解决您的问题。 是的，最简单的错误更难找到。 :) 【参考方案1】：我认为我能够重现并解决您的问题。基本上:in-viewport 不包含在 jquery 伪选择器中。所以你需要一个像http://www.appelsiini.net/projects/viewport 这样的插件才能正常工作。还要确保此插件已加载到您的页面中。
这是:in-viewport http://jsfiddle.net/tfLp17oz/ 的工作示例
【讨论】：
以上是关于如何在可滚动部分的视口中更改项目的样式属性？的主要内容，如果未能解决你的问题，请参考以下文章