21-解决方案

6.5.2　解决方案

使用本章前几节讨论的几个方法。

这一过程有如下几个步骤：

1．确定视区大小。

2．确定文档的滚动位置。

3．计算元素可见时左上角位置的最小和最大值。

4．用计算出来的这些值与元素位置比较。

jQuery(document).ready(function() {
　　 var viewportWidth = jQuery(window).width(),
　　　　　viewportHeight = jQuery(window).height(),
　　　　　documentScrollTop = jQuery(document).scrollTop(),
　　　　　documentScrollLeft = jQuery(document).scrollLeft(),
　　　　　minTop = documentScrollTop,
　　　　　maxTop = documentScrollTop + viewportHeight,
　　　　　minLeft = documentScrollLeft,
　　　　　maxLeft = documentScrollLeft + viewportWidth,
　　　　　$myElement = jQuery('#myElement'),
　　　　　elementOffset = $myElement.offset();
　　 if (
　　　　　 (elementOffset.top > minTop && elementOffset.top < maxTop) &&
　　　　　 (elementOffset.left > minLeft &&elementOffset.left < maxLeft)
　　 ) {
　　　　　alert('element is visible');
　　 } else {
　　　　　alert('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'),
　　　　　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 {
　　 // 元素不可见;滚动
　　 alert('element is not visible; scrolling');
　　 scrollToPosition(elementOffset);
}
});

注意

Ariel Flesler开发的scrollTo插件（http://jquery-cookbook.com/go/plugin-scrollto ）提供了对许多这类方法的快捷访问方法，只要编写 $.scrollTo('#myElement') ；这样的代码就能确定目标元素的位置。