如果元素不可见则滚动

Question

如何使用jquery确定元素在当前页面视图中是否可见.我想添加一个注释功能,就像在facebook中一样,只有在当前不可见时才滚动到元素.通过可见,我的意思是它不在当前页面视图中,但您可以滚动到该元素.

Answer 1

现场演示

基本上你只需要检查元素的位置,看它是否在windows视口中.

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;
}

Answer 2

改进Loktar的答案,修复以下内容:

1. 向上滑动

2. 滚动到显示:无元素(如隐藏的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;
   }
   

Answer 3

在尝试了所有这些解决方案以及更多其他解决方案后,他们都没有满足我在IE11中运行旧门户网站软件(10年)的要求(在某些兼容模式下).他们都无法正确确定元素是否可见.但是我发现这个解决方案.我希望它有所帮助.

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);
    }
}

Answer 4

我制作了一个稍微更通用的digitalPBK答案版本,它最小程度地滚动div或其他容器(包括正文)中包含的元素.您可以将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;
}