Question

如何检测完全（非部分）在特定容器宽度之外的元素？

例如，我有以下内容：

<div id="content">
   <div class="wrapper">
      <p>This is a paragraph</p>
      <p>This is a paragraph</p>
      <p>This is a paragraph</p>
      <p>This is a paragraph</p>
   </div>
</div>

我的content div的宽度为100％，我的p代码设置为动画以在屏幕上滚动。如何检测它们是否在content div之外，以便我可以删除它们？

由于我的content div还有一个容器，因此不能选择在视口外部进行测试。

Answer 1

我相信getBoundingClientRect()方法应该运行良好。使用段落做了一个更好的工作示例，这里是fiddle。

function HorizontallyBound(parentDiv, childDiv) {
    var parentRect = parentDiv.getBoundingClientRect();
    var childRect = childDiv.getBoundingClientRect();

    return parentRect.left >= childRect.right || parentRect.right <= childRect.left;
}

var bound = HorizontallyBound(document.getElementById("parent"), document.getElementById("some_paragraph"));

或者使用具有相同概念的jQuery：

function HorizontallyBound($parentDiv, $childDiv) {
    var parentRect = $parentDiv[0].getBoundingClientRect();
    var childRect = $childDiv[0].getBoundingClientRect();

    return parentRect.left >= childRect.right || parentRect.right <= childRect.left;
}

var bound = HorizontallyBound($("#parent"), $("#some_paragraph"));

更新了我的回答，因为我重读了您是否正在检查孩子是否在父母之外完全，而不是部分。

Answer 2

如果我理解你正确的要求，你可以尝试我在我自己的网站上使用的东西：

var $elem = $('#preview_link_box'),
    top = $elem.offset().top,
    left = $elem.offset().left,
    width = $elem.width(),
    height = $elem.height();


if (left + width > $(window).width()) {
    console.log("Looks like its outside the viewport...");
}

Answer 3

我不知道你要做什么，但我试图创造类似的东西。就逻辑而言，这是一个非常简单的想法。 jsfiddle here

基本上我的想法是使用#content div的宽度并将p元素滑过，直到达到该数字，然后将其删除。

var width = $('.wrapper p:first').width(),
    i     = 0, 
    $me   = $('.wrapper p');

// slide paragraphs over to the left, once out of bounds they are removed
var interval = setInterval(function() {
    if (i == -width) {
        clearInterval(interval);
        $me.remove();
    }
    $me.css('margin-left', --i);
}, 10);

如何检测元素是否在其容器的宽度之外？

3 个答案: