如果元素不可见则滚动

如何使用jquery确定元素在当前页面视图中是否可见。 我想添加一个评论function，就像在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

我制作了一个稍微更通用的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; } 

Answer 4

在尝试了所有这些解决方案以及更多解决方案之后，它们都没有满足我在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 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); } 

Answer 6

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

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

Answer 7

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

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

 
 
 
 Scroll up and down to alert the footer visibility by color: 
 
 
Blue = footer not visible;
 
Yellow = footer visible;
 
  
 
  
 

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

之后你可以用这样简单的方式使用它：

这是一个演示