Question

我跟随this guide检测我的视频元素何时进入视口然后执行＆＃34; x＆＃34;，但不断获取标题错误。不确定是因为我使用wordpress与gulp和piling.js

我的页面使用打桩，我有一个视频部分，当我滚动到那个＆＃34;堆栈＆＃34;，我希望视频开始播放但它开始播放页面加载。

// inside document.ready()

 $('video').each(function(){
    if ($(this).is(":in-viewport")) {
        $(this)[0].play();
    } else {
        $(this)[0].pause();
    }
})

未捕获错误：语法错误，无法识别的表达式：unsupported pseudo：in-viewport

<div id='<ID-CHANGES-INSIDE-LOOP>' class='image-block'>
  <video autoplay>
    <source class='video' src='movie.mp4' type='video/mp4'>
  </video>
</div>

使用Piling是否难以使用？

Answer 1

伪选择器需要它的插件才能工作（它不是jQuery选择器的一部分），但现在你可以使用.getBoundingClientRect()轻松检查元素是否在视口中。这是我使用的方法：

/**
 * Check if an element is in the visible viewport
 * @param {jQuery|HTMLElement} el
 * @return boolean
 */
var IsInViewport = function(el) {
    if (typeof jQuery === "function" && el instanceof jQuery) el = el[0];
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};

// example
if( IsInViewport($('#myvideo')) ) { /* do stuff.. */ }

另外，根据您的需要，您可以使用:visible选择器（https://api.jquery.com/visible-selector/）。

Answer 2

伪属性:in-viewport需要通过插件附加（我再也找不到了） -

可以尝试尝试OnScreen基本可见性检测;它做的大致相同。

Answer 3

您应该使用pagePiling.js callbacks或州级。

不支持的伪：视口内

3 个答案: