不支持的伪：视口内

Question

我正在关注 this guide to detect when my video element comes in viewport then do "x", but keep getting the title error. Not sure if because Im using wordpress with gulp and piling.js

我的页面使用 Piling，我有一个视频部分，当我滚动到那个部分时 "stack"，我希望视频开始播放，但它在页面加载时开始播放。

// inside document.ready()

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

Uncaught Error: Syntax error, unrecognized expression: 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

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

也许可以试试 OnScreen 基本可见性检测；它的作用大致相同。

Answer 2

该伪选择器需要其插件才能工作（它不是 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 3

您应该使用 pagePiling.js callbacks 或声明类。

不支持的伪：视口内

unsupported pseudo: in-viewport

javascript

php

jquery

pagepiling.js