Question

我正在使用导航下拉列表，它有几个下拉选项。所以如果它离开视口边缘，我想添加一个类move-left。

我已经尝试了getBoundingClientRect();，但它给了我以下错误：

未捕获的TypeError：el.getBoundingClientRect不是函数

我的浏览器是chrome最新版本。

我的代码是：

var isElemInViewport = function(el){
    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)
    );
}

var el = $('ul.nav-menu li ul li ul');
$('ul.nav-menu li ul li').hover(function(){
    if(!isElemInViewport(el)){
        alert('o ya')
    }
}, function(){
     if(!isElemInViewport(el)){
        alert('no more')
     }
})

Answer 1

您正在尝试通过jQuery对象访问属于本机DOM元素的方法。

所以，你需要改变这一行：

var el = $('ul.nav-menu li ul li ul');

对此：

// The jQuery object, at property '0', contains the native DOM element
// you want. If you were to get multiple matches for your selector,
// they'll be numbered in order: 
// $('selector')[0], $('selector')[1], $('selector')[2], ...

var el = $('ul.nav-menu li ul li ul')[0];

如果元素超出视口，则将该类添加到元素

1 个答案: