我通过AJAX加载元素。其中一些只有当你向下滚动页面时才能看到。有什么方法可以知道元素现在是否在页面的可见部分?


当前回答

Javascript代码可以写成:

窗口。addEventListener('scroll', function() { var element = document.querySelector('#main-container'); var position = element.getBoundingClientRect(); //检查是否完全可见 如果位置。顶部>= 0 &&位置。bottom <= window.innerHeight) { console.log('元素在屏幕上完全可见'); } //检查部分可见性 如果位置。顶部<窗口。innerHeight && position。底部>= 0){ console.log('元素在屏幕上部分可见'); } });

在react js中写为:

componentDidMount () { 窗口。addEventListener(“滚动”,this.isScrolledIntoView); } componentWillUnmount () { 窗口。removeEventListener(“滚动”,this.isScrolledIntoView); } isScrolledIntoView () { var element = document.querySelector('.element'); var position = element.getBoundingClientRect(); //检查是否完全可见 如果位置。顶部>= 0 &&位置。bottom <= window.innerHeight) { console.log('元素在屏幕上完全可见'); } //检查部分可见性 如果位置。顶部<窗口。innerHeight && position。底部>= 0){ console.log('元素在屏幕上部分可见'); } }

其他回答

我在我的应用程序中有这样一个方法,但它不使用jQuery:

/* Get the TOP position of a given element. */
function getPositionTop(element){
    var offset = 0;
    while(element) {
        offset += element["offsetTop"];
        element = element.offsetParent;
    }
    return offset;
}

/* Is a given element is visible or not? */
function isElementVisible(eltId) {
    var elt = document.getElementById(eltId);
    if (!elt) {
        // Element not found.
        return false;
    }
    // Get the top and bottom position of the given element.
    var posTop = getPositionTop(elt);
    var posBottom = posTop + elt.offsetHeight;
    // Get the top and bottom position of the *visible* part of the window.
    var visibleTop = document.body.scrollTop;
    var visibleBottom = visibleTop + document.documentElement.offsetHeight;
    return ((posBottom >= visibleTop) && (posTop <= visibleBottom));
}

编辑:此方法适用于I.E.(至少版本6)。请阅读评论以了解FF的兼容性。

我只是想分享一下,我把这个和我的脚本结合起来移动div,这样它就总是在视图中:

    $("#accordion").on('click', '.subLink', function(){
        var url = $(this).attr('src');
        updateFrame(url);
        scrollIntoView();
    });

    $(window).scroll(function(){
            changePos();
    });

  function scrollIntoView()
  {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();    
        var elemTop = $("#divPos").offset().top;
        var elemBottom = elemTop + $("#divPos").height();               
        if (elemTop < docViewTop){
            $("#divPos").offset({top:docViewTop});
        }
   }

   function changePos(){        
    var scrTop = $(window).scrollTop();
    var frmHeight = $("#divPos").height()
        if ((scrTop < 200) || (frmHeight > 800)){   
         $("#divPos").attr("style","position:absolute;");
        }else{
          $("#divPos").attr("style","position:fixed;top:5px;");
        }
    }

唯一适用于我的解决方案是(当$("#elementToCheck")可见时返回true):

$ (document) .scrollTop () + window.innerHeight + $ (" # elementToCheck ") .height () > $ (" # elementToCheck ") .offset直()上

仅限Javascript:)

function isInViewport(element) {
  var rect = element.getBoundingClientRect();
  var html = document.documentElement;
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || html.clientHeight) &&
    rect.right <= (window.innerWidth || html.clientWidth)
  );
}

Javascript代码可以写成:

窗口。addEventListener('scroll', function() { var element = document.querySelector('#main-container'); var position = element.getBoundingClientRect(); //检查是否完全可见 如果位置。顶部>= 0 &&位置。bottom <= window.innerHeight) { console.log('元素在屏幕上完全可见'); } //检查部分可见性 如果位置。顶部<窗口。innerHeight && position。底部>= 0){ console.log('元素在屏幕上部分可见'); } });

在react js中写为:

componentDidMount () { 窗口。addEventListener(“滚动”,this.isScrolledIntoView); } componentWillUnmount () { 窗口。removeEventListener(“滚动”,this.isScrolledIntoView); } isScrolledIntoView () { var element = document.querySelector('.element'); var position = element.getBoundingClientRect(); //检查是否完全可见 如果位置。顶部>= 0 &&位置。bottom <= window.innerHeight) { console.log('元素在屏幕上完全可见'); } //检查部分可见性 如果位置。顶部<窗口。innerHeight && position。底部>= 0){ console.log('元素在屏幕上部分可见'); } }