如果元素不可见，则滚动屏幕

Question

如何使用jQuery确定元素是否在当前页面视图中可见。我想添加一个评论功能，它的工作方式类似于Facebook，只有在元素当前不可见时才会滚动到该元素。这里的“可见”是指该元素不在当前页面视图中，但您可以将其滚动到视图中。

- macpak

Answer 1

演示实例

基本上，您只需检查元素的位置是否在窗口视口内。

function checkIfInView(element){
    var offset = element.offset().top - $(window).scrollTop();

    if(offset > window.innerHeight){
        // Not in view so scroll to it
        $('html,body').animate({scrollTop: offset}, 1000);
        return false;
    }
   return true;
}

- Loktar

---

您的演示目前使用的是 innerWidth 而不是 innerHeight。 - DGM

实际上，它只能向下滚动。你还需要检查offset.top < window.scrollTop，以防需要向上滚动。 - DGM

这适用于整个页面，但如果页面的一部分是可滚动的，则不起作用，因为它需要滚动。 - mliebelt

当您需要向上滚动时，建议使用差值的绝对值。以下是代码：function checkIfInView(element){ var offset = element.offset().top - $(window).scrollTop(); if(offset > window.innerHeight || offset < window.innerHeight){ // 不在视图中 $('html,body').animate({scrollTop: offset}, 1000); return false; } return true; } - technology_dreamer

要实现双向滚动： (element.offset().top - $(window).scrollTop()) > window.innerHeight || (element.offset().top - $(window).scrollTop()) < 0 - Jan Matousek

Answer 2

改进Loktar的回答，修复以下问题：

1. 向上滚动

2. 滚动到display:none元素（如隐藏的div等）

   function scrollToView(element){
       var offset = element.offset().top;
       if(!element.is(":visible")) {
           element.css({"visibility":"hidden"}).show();
           var offset = element.offset().top;
           element.css({"visibility":"", "display":""});
       }
   
       var visible_area_start = $(window).scrollTop();
       var visible_area_end = visible_area_start + window.innerHeight;
   
       if(offset < visible_area_start || offset > visible_area_end){
            // Not in view so scroll to it
            $('html,body').animate({scrollTop: offset - window.innerHeight/3}, 1000);
            return false;
       }
       return true;
   }
   

- digitalPBK

Answer 3

在尝试了所有这些解决方案以及其他许多解决方案之后，它们都未能满足我运行旧的Web门户软件（10年前）在IE11中（某些兼容模式）的要求。它们都无法正确确定元素是否可见。但是我找到了这个解决方案。希望它能帮到你。

function scrollIntoViewIfOutOfView(el) {
    var topOfPage = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    var heightOfPage = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    var elY = 0;
    var elH = 0;
    if (document.layers) { // NS4
        elY = el.y;
        elH = el.height;
    }
    else {
        for(var p=el; p&&p.tagName!='BODY'; p=p.offsetParent){
            elY += p.offsetTop;
        }
        elH = el.offsetHeight;
    }
    if ((topOfPage + heightOfPage) < (elY + elH)) {
        el.scrollIntoView(false);
    }
    else if (elY < topOfPage) {
        el.scrollIntoView(true);
    }
}

- user1806949

Answer 4

我稍微改进了digitalPBK的答案，使其最小化滚动一个包含在div或其他容器（包括body）中的元素。你可以将DOM元素或选择器传递给函数，只要该元素在父级内部。

function scrollToView(element, parent) {
    element = $(element);
    parent = $(parent);

    var offset = element.offset().top + parent.scrollTop();

    var height = element.innerHeight();
    var offset_end = offset + height;
    if (!element.is(":visible")) {
        element.css({"visibility":"hidden"}).show();
        var offset = element.offset().top;
        element.css({"visibility":"", "display":""});
    }

    var visible_area_start = parent.scrollTop();
    var visible_area_end = visible_area_start + parent.innerHeight();

    if (offset-height < visible_area_start) {
        parent.animate({scrollTop: offset-height}, 600);
        return false;
    } else if (offset_end > visible_area_end) {
        parent.animate({scrollTop: parent.scrollTop()+ offset_end - visible_area_end }, 600);
        return false;

    }
    return true;
}

- jaggedcow

Answer 5

您可以查看jQuery Cookbook中的这个链接：

确定元素是否在视口内

测试元素是否包含在视口中

jQuery(document).ready(function() {
    var viewportWidth = jQuery(window).width(),
        viewportHeight = jQuery(window).height(),
        documentScrollTop = jQuery(document).scrollTop(),
        documentScrollLeft = jQuery(document).scrollLeft(),

        $myElement = jQuery('#myElement'),

        elementOffset = $myElement.offset(),
        elementHeight = $myElement.height(),
        elementWidth = $myElement.width(),

        minTop = documentScrollTop,
        maxTop = documentScrollTop + viewportHeight,
        minLeft = documentScrollLeft,
        maxLeft = documentScrollLeft + viewportWidth;

    if (
        (elementOffset.top > minTop && elementOffset.top + elementHeight < maxTop) &&
        (elementOffset.left > minLeft && elementOffset.left + elementWidth < maxLeft)
    ) {
        alert('entire element is visible');
    } else {
        alert('entire element is not visible');
    }
});

测试元素可见度程度

jQuery(document).ready(function() {

var viewportWidth = jQuery(window).width(),
    viewportHeight = jQuery(window).height(),

    documentScrollTop = jQuery(document).scrollTop(),
    documentScrollLeft = jQuery(document).scrollLeft(),

    $myElement = jQuery('#myElement'),

    verticalVisible, horizontalVisible,

    elementOffset = $myElement.offset(),
    elementHeight = $myElement.height(),
    elementWidth = $myElement.width(),

    minTop = documentScrollTop,
    maxTop = documentScrollTop + viewportHeight,
    minLeft = documentScrollLeft,
    maxLeft = documentScrollLeft + viewportWidth;

function scrollToPosition(position) {
    jQuery('html,body').animate({
        scrollTop : position.top,
        scrollLeft : position.left
    }, 300);
}

if (
    ((elementOffset.top > minTop && elementOffset.top < maxTop) ||
    (elementOffset.top + elementHeight > minTop && elementOffset.top + 
elementHeight < maxTop))
&&  ((elementOffset.left > minLeft && elementOffset.left < maxLeft) ||
    (elementOffset.left + elementWidth > minLeft && elementOffset.left +
elementWidth < maxLeft)))
{
    alert('some portion of the element is visible');

    if (elementOffset.top >= minTop && elementOffset.top + elementHeight 
<= maxTop) {
        verticalVisible = elementHeight;
    } else if (elementOffset.top < minTop) {
        verticalVisible = elementHeight - (minTop - elementOffset.top);
    } else {
        verticalVisible = maxTop - elementOffset.top;
    }

    if (elementOffset.left >= minLeft && elementOffset.left + elementWidth 
<= maxLeft) {
        horizontalVisible = elementWidth;
    } else if (elementOffset.left < minLeft) {
        horizontalVisible = elementWidth - (minLeft - elementOffset.left);
    } else {
        horizontalVisible = maxLeft - elementOffset.left;
    }

    var percentVerticalVisible = (verticalVisible / elementHeight) * 100;
    var percentHorizontalVisible = (horizontalVisible / elementWidth) * 100;

    if (percentVerticalVisible < 50 || percentHorizontalVisible < 50) {
        alert('less than 50% of element visible; scrolling');
        scrollToPosition(elementOffset);
    } else {
        alert('enough of the element is visible that there is no need to scroll');
    }

} else {
    // element is not visible; scroll to it
    alert('element is not visible; scrolling');
    scrollToPosition(elementOffset);
}

- Leniel Maccaferri

Answer 6

这是我想出的解决方案，可以上下移动，并且仅使用原生Javascript，没有jQuery。

function scrollToIfNotVisible(element) {
    const rect = element.getBoundingClientRect();
    // Eventually an offset corresponding to the height of a fixed navbar for example.
    const offset = 70;
    let scroll = false;
    if (rect.top < offset) {
        scroll = true;
    }
    if (rect.top > window.innerHeight) {
        scroll = true;
    }
    if (scroll) {
        window.scrollTo({
            top: (window.scrollY + rect.top) - offset,
            behavior: 'smooth'
        })
    }
}

- NathanVss

Answer 7

以下代码帮助我实现了结果。

function scroll_to_element_if_not_inside_view(element){
  if($(window).scrollTop() > element.offset().top){
    $('html, body').animate( { scrollTop: element.offset().top }, {duration: 400 } );
  }
}

- Ashok Gj

---

这仅适用于需要向上滚动而不是向下滚动的情况。 - lukas84

Answer 8

有一个jQuery插件，它允许我们快速检查整个元素（或仅部分元素）是否在浏览器的视口内，而不考虑窗口滚动位置。您需要从其GitHub存储库下载它：

假设您有以下HTML代码，并且希望在页脚可见时发出警报：

<section id="container">
    <aside id="sidebar">
        <p>
            Scroll up and down to alert the footer visibility by color:
        </p>
        <ul>
            <li><span class="blue">Blue</span> = footer <u>not visible</u>;</li>
            <li><span class="yellow">Yellow</span> = footer <u>visible</u>;</li>
        </ul>
        <span id="alert"></span>
    </aside>
    <section id="main_content"></section>
</section>
<footer id="page_footer"></footer>

因此，在 body 标签关闭之前添加插件：

<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/jquery_visible/examples/js/jq.visible.js"></script>

之后，您可以像这样简单地使用它：

<script type="text/javascript">
jQuery( document ).ready(function ( $ ) {
  if ($("footer#page_footer").visible(true, false, "both")) {
    $("#main_content").css({"background-color":"#ffeb3b"});
    $("span#alert").html("Footer visible");
  } else {
    $("#main_content").css({"background-color":"#4aafba"});
    $("span#alert").html("Footer not visible");
  }

  $(window).scroll(function() {
    if ($("footer#page_footer").visible(true, false, "both")) {
      $("#main_content").css({"background-color":"#ffeb3b"});
      $("span#alert").html("Footer visible");
    } else {
      $("#main_content").css({"background-color":"#4aafba"});
      $("span#alert").html("Footer not visible");
    }
  });
});
</script>

这里有一个演示

- Riccardo Volpe

Answer 9

无 JQuery 版本。

这里的特殊情况是滚动容器是一个 TABLE 的 body (TBODY, table.body)（与 THEAD 独立滚动）。但它可以适应任何情况，一些更简单的情况。

const row = table.body.children[ ... ];
...

const bottomOfRow = row.offsetHeight + row.offsetTop ;
// if the bottom of the row is in the viewport...
if( bottomOfRow - table.body.scrollTop < table.body.clientHeight ){
    // ... if the top of the row is in the viewport
    if( row.offsetTop - table.body.scrollTop > 0 ){
        console.log( 'row is entirely visible' );
    }
    else if( row.offsetTop - table.body.scrollTop + row.offsetHeight > 0 ){
        console.log( 'row is partly visible at top')
        row.scrollIntoView();
    }
    else {
        console.log( 'top of row out of view above viewport')
        row.scrollIntoView();
    }
}
else if( row.offsetTop  - table.body.scrollTop < table.body.clientHeight ){
    console.log( 'row is partly visible at bottom')
    row.scrollIntoView();
}
else {
    console.log( 'row is out of view beneath viewport')
    row.scrollIntoView();
}

- mike rodent

Answer 10

我认为这是完整的答案。电梯必须能够上下运行 ;)

function ensureVisible(elementId, top = 0 /* set to "top-nav" Height (if you have)*/) {
  let elem = $('#elementId');
  if (elem) {
    let offset = elem.offset().top - $(window).scrollTop();
    if (offset > window.innerHeight) { // Not in view
      $('html,body').animate({ scrollTop: offset + top }, 1000);
    } else if (offset < top) { // Should go to top
      $('html,body').animate({ scrollTop: $(window).scrollTop() - (top - offset) }, 1000);
    }
  }
}

- AmirHossein Manian