首页 >web前端 >js教程 >如果使用 JavaScript 页面底部可见,如何返回 true?

如果使用 JavaScript 页面底部可见,如何返回 true?

WBOY
WBOY转载
2023-08-24 19:25:10792浏览

如果使用 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 和 scrollY 大于或等于 scrollHeightclientHeight。如果此条件为真,则页面底部将可见。因此,我们定义一个函数,如果满足条件,则返回 true。

示例

使用 documentElementclientHeight 属性>

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

<!DOCTYPE html>
<html>
<head>
   <title>Example - Bottom Visible JavaScript</title>
</head>
   <body>
   <div style="margin-bottom:100px;">
   <h3>Checking if bottom of page is visible</h3>
   <p id = "bottom"> Is bottom of the Page visible?<br></p>
   </div>
   <div> You reached to the bottom of the page.</div>
   <script>
      const bottomVisible = () =>
      document.documentElement.clientHeight + window.scrollY >=
      (document.documentElement.scrollHeight ||
      document.documentElement.clientHeight);
      console.log(bottomVisible());
      document.getElementById("bottom").innerHTML += bottomVisible()
   </script>
</body>
</html>

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

示例

使用window界面的clientHeight属性

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

<!DOCTYPE html>
<html>
<head>
   <title>Example - Bottom Visible JavaScript</title>
</head>
   <body>
   <div style="margin-bottom:100px;">
   <h3>Checking if bottom of page is visible</h3>
   <p id = "bottom"> Is bottom of the Page visible?<br></p>
   </div>
   <div> You reached to the bottom of the page.</div>
   <script>
      const bottomVisible = () =>
      window.innerHeight + window.scrollY >=(document.documentElement.scrollHeight || window.innerHeight);
      console.log(bottomVisible());
      document.getElementById("bottom").innerHTML += bottomVisible()
   </script>
</body>
</html>

示例

页面底部不可见

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

<html>
<head>
   <title>Example - Bottom Visible JavaScript</title>
</head>
   <body>
   <div style="margin-bottom:2500px;">
      <h3>The bottom of page not visible</h3>
      <p id = "bottom"> Is bottom of the Page visible?<br></p>
      <p id> <br> Please scroll down to reach the bottom...</p>
   </div>
   <div> You reached to the bottom of the page.</div>
   <script>
      const bottomVisible = () =>
      window.clientHeight + window.scrollY >=(document.documentElement.scrollHeight || window.clientHeight);
      console.log(bottomVisible());
      document.getElementById("bottom").innerHTML += bottomVisible()
   </script>
</body>
</html>

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

声明:
本文转载于:tutorialspoint.com。如有侵权,请联系admin@php.cn删除