如果使用 JavaScript 页面底部可见，如何返回 true？

在本教程中，我们将检查页面的底部是否对用户可见。我们可以通过使用窗口的高度和滚动窗口的高度来实现此功能。要编写此代码，我们需要了解 JavaScript 的三种方法，如下所示：

scrollY- 它是窗口的只读属性，并返回文档具有的像素垂直滚动。

window.scrollY

scrollHeight -它是一个 HTML DOM 元素，也是窗口的只读属性。它返回元素内容的高度，包括不可见的内容。

element.scrollHeight

clientHeight- 它也是只读属性，返回元素的可视高度（以像素为单位），包括填充，但不包括边框、滚动条或边距。

element.clientHeight window.clientHeight

注意- 上述三种方法均以像素为单位测量元素的值。

语法

以下是要检查的条件的语法如果页面底部可见。

document.documentElement.clientHeight + window.scrollY >=(document.documentElement.scrollHeight ||document.documentElement.clientHeight);

如果上述条件成立，页面底部将可见。

方法

我们检查clientHeight和 < em>scrollY大于或等于scrollHeight或clientHeight。如果此条件为真，则页面底部将可见。因此，我们定义一个函数，如果满足条件，则返回 true。

示例

使用documentElement的clientHeight属性>

在下面的程序中，我们检查页面底部是否可见。我们使用documentElement的clientHeight属性检查语法部分中定义的条件。

    
  
 
Checking if bottom of page is visible
 
 Is bottom of the Page visible?
 
 
 You reached to the bottom of the page.
   

在上面的代码中，我们比较两个值，一个是客户端高度和scrollY之和，另一个是滚动高度和客户端高度的或运算。当客户端高度与scrollY之和大于或等于滚动高度与客户端高度的或运算时，结果值为true，表示页面底部可见。

示例

使用window界面的clientHeight属性

在下面的程序中，我们检查是否页面底部可见或不可见。我们使用window接口的clientHeight属性检查语法部分中定义的条件。

    
  
 
Checking if bottom of page is visible
 
 Is bottom of the Page visible?
 
 
 You reached to the bottom of the page.
   

示例

页面底部不可见

在下面的程序中，我们将 div 的下边距设置得很高，以便页面底部不可见。

   
  
 
The bottom of page not visible
 
 Is bottom of the Page visible?
 
 
 Please scroll down to reach the bottom...
 
 
 You reached to the bottom of the page.
   

以上是如果使用 JavaScript 页面底部可见，如何返回 true？的详细内容。更多信息请关注PHP中文网其他相关文章！