Javascript 不支持的伪：在视口中

我正在跟踪检测我的视频元素何时出现在视口中，然后执行“x”，但不断得到标题错误。不确定是否因为我使用wordpress和gulp和

我的页面使用堆叠，我有一个视频部分，当我滚动到“堆栈”时，我希望视频开始播放，但它在页面加载时开始播放

// inside document.ready()

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

未捕获错误：语法错误，无法识别的表达式：不支持的伪：在视口中

---

使用打桩是否使这项工作变得困难？

虚拟属性

：在视口中

需要通过插件连接（我再也找不到该插件了）-

---

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

虚拟属性

：在视口中

需要由插件附加（我再也找不到了）-

---

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

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

/**
*检查元素是否在可见视口中
*@param{jQuery | HTMLElement}el
*@返回布尔值
*/
var IsInViewport=函数（el）{
if（jQuery的typeof==“函数”&&el实例）el=el[0]；
var rect=el.getBoundingClientRect（）；
返回(
rect.top>=0&&
rect.left>=0&&
rect.bottom这个伪选择器需要它的插件才能工作（它不是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.. */ }

/**
*检查元素是否在可见视口中
*@param{jQuery | HTMLElement}el
*@返回布尔值
*/
var IsInViewport=函数（el）{
if（jQuery的typeof==“函数”&&el实例）el=el[0]；
var rect=el.getBoundingClientRect（）；
返回(
rect.top>=0&&
rect.left>=0&&
rect.bottom您应该使用或状态类。
您应该使用或状态类。
您好。我得到
无法读取未定义的属性“getBoundingClientRect”。我不好。是的，这很有效。ThnaksHow关于不在视图端口中？我正在寻找一个我以前制作的与您所寻找的非常匹配的示例。Hope它适用于您：关于否定，
IsInViewport（）
返回一个布尔值，这样您就可以执行
！IsInViewport（/*…*/）
Hi，答案是使用PagePilling回调，这很有效。但是，我对你的代码很有用。谢谢。这是一个upvote。Hi。我得到
无法读取未定义的属性“getBoundingClientRect”。我的错。是的，这很有效。ThnaksHow关于不在视图端口中？我正在寻找一个我以前制作的非常匹配的示例这就是你要找的。希望它对你有用：关于否定，
IsInViewport（）
返回一个布尔值，这样你就可以只执行
！IsInViewport（/*…*/）
嗨，答案是使用pagepilling回调，这很有效。不过，我对你的代码很有用。谢谢。这里是一个投票。