【JavaScript】十八、頁面加載事件和頁面滾動事件

文章目錄

1、頁面加載事件
- 1.1 load
- 1.2 DOMContentLoaded
2、頁面滾動事件
- 2.1 語法
- 2.2 獲取滾動位置
3、案例：頁面滾動顯示隱藏側邊欄

1、頁面加載事件

script標簽在html中的位置一般在</body>標簽上方，這是因為代碼從上往下執行，在html元素都沒加載的情況下，JS去獲取DOM對象，會獲取不到，如下，script標簽提前，button對象就獲取不到

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>const btn = document.querySelector('button')btn.addEventListener('click', function() {alert('點擊了')})</script>
</head><body><button>點擊</button>
</body>

此時，可以考慮加一個事件，等下面都加載完了，再來執行JS代碼 ==> 頁面加載事件 ==> 等頁面資源全部處理完了再去做一些事情

1.1 load

事件名：load
作用：監聽頁面所有資源加載完畢，再執行回調函數
示例：給 window 添加 load 事件

在這里插入圖片描述

利用頁面加載事件load，可以解決開篇說到的問題：

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 等待頁面所有資源都加載完畢了，再執行事件都回調函數// 這里給window添加load事件（window比document還大）window.addEventListener('load', function () {const btn = document.querySelector('button')btn.addEventListener('click', function () {alert('點擊了')})})</script>
</head><body><button>點擊</button>
</body>

不光可以監聽整個頁面資源加載完畢，也可以針對某個資源綁定load事件，也就是說不一定用window：

<script>// 如果我要等某個圖片加載完畢，再去執行回調代碼img.addEventListener('load', function () {alert('加載完成')})
</script>

1.2 DOMContentLoaded

當初始的 HTML 文檔被完全加載和解析完成之后，DOMContentLoaded 事件被觸發，而無需等待樣式表、圖像等完全加載，只要html標簽加載完就行

事件名：DOMContentLoaded
示例：給 document 添加 DOMContentLoaded 事件

在這里插入圖片描述

2、頁面滾動事件

很多網頁需要檢測用戶把頁面滾動到某個區域后做一些處理，比如固定導航欄，比如返回頂部
在這里插入圖片描述

2.1 語法

事件名：scroll
監聽整個頁面滾動（不是只能給window加，監聽某個元素的內部滾動直接給某個元素加即可）：

在這里插入圖片描述

示例：

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 平時寫的html沒有滾動條，因為html頁面和整個瀏覽器窗口一樣大，這里給body加個高度變的超出窗口大小，就出現滾動條了 */body {height: 3000px;}</style>
</head><body><script>window.addEventListener('scroll', function () {console.log('發生滾動了～')})</script>
</body>

示例2：給div對象添加滾動事件

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {margin: 100px;width: 200px;height: 200px;/* 只要有滾動條，都可以添加滾動事件 */overflow: scroll;border: 1px solid #000;}</style>
</head><body><div>這是很多文字這是很多文字這是很多文字這是很多文字這是很多文字這是很多文字這是很多文字這是很多文字這是很多文字這是很多文字這是很多文字這是很多文字這是很多文字這是很多文字這是很多文字這是很多文字</div><script>const div = document.querySelector('div')div.addEventListener('scroll', function () {console.log('滾動了～')})</script>
</body>

在這里插入圖片描述

2.2 獲取滾動位置

如下，在上面div的例子中，滾動條向下拉，文字向上走（綠色代表div盒子，紅色代表文字內容），紫色線所示長度，就是被卷去的長度，即scrollTop

在這里插入圖片描述

同理，如果是橫向滾動條，就是scrollLeft，scrollTop和scrollLeft分別是獲取元素內容往左、往上滾出去看不到的距離

在這里插入圖片描述
要在scroll事件里面去獲取被卷去的距離：

在這里插入圖片描述

當然，一般獲取的是頁面滾動的距離，獲取整個html頁面，不是document.html，而是document.documentElement

在這里插入圖片描述

由此：獲取整個html頁面滾動的距離：

<body><script>window.addEventListener('scroll', function () { console.log(document.documentElement.scrollTop)})</script>
</body>

在這里插入圖片描述

再擴展，讓這個滑動距離滿足一定條件時，出現一個返回頂部👆的文字

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {height: 3000px;}div {display: none;}</style>
</head><body><div>返回頂部👆</div><script>const div = document.querySelector('div')window.addEventListener('scroll', function () {// 這里用const沒問題，局部變量，每觸發一次scroll事件，執行一次回調函數，對應一個局部變量n// 獲取整個頁面滑動的距離const n = document.documentElement.scrollTopconsole.log(n)if (n >= 1) {   // 這里給個1，給太大了，等生效的時候，文字已經滑上去了，出來了也看不到效果div.style.display = 'block'} else {// 滾動條拉上去后再隱藏div.style.display = 'none'}})</script>
</body></html>

在這里插入圖片描述
最后，scrollTop和scrollLeft這兩個值是數值型，可讀可寫，可寫即用于實現頁面一打開就在中間，或者實現返回頂部，一點就給這個值賦0

// 實現頁面一打開就在中間
<script>document.documentElement.scrollTop = 800//...
</script>

3、案例：頁面滾動顯示隱藏側邊欄

需求：

當頁面滾動大于300像素的距離時候，就顯示電梯側邊欄（叫電梯是因為點擊下圖中的每一樓選項，會直接跳到對應位置），否則隱藏
點擊電梯里的“頂部”，頁面回到頂部

關鍵代碼：

//...html略</div></div><!-- 電梯 --><div class="xtx-elevator"><ul class="xtx-elevator-list"><li><a href="javascript:;" data-name="new">新鮮好物</a></li><li><a href="javascript:;" data-name="popular">人氣推薦</a></li><li><a href="javascript:;" data-name="brand">熱門品牌</a></li><li><a href="javascript:;" data-name="topic">最新專題</a></li><li><a href="javascript:;" id="backTop"><i class="sprites"></i>頂部</a></li></ul></div><script>const elevator = document.querySelector('.xtx-elevator')window.addEventListener('scroll', function () {const n = document.documentElement.scrollTopif (n >= 300) {elevator.style.opacity = 1  // opacity即淡入淡出，溫柔版的display} else {elevator.style.opacity = 0}// elevator.style.opacity = n >= 300 ? 1 : 0// 返回頂部const backTop = document.querySelector('#backTop')backTop.addEventListener('click', function () {document.documentElement.scrollTop = 0})})</script></body></html>

補充：scrollTo() 方法可把內容滾動到指定的坐標

語法：元素.scrollTo(x, y)
示例：

在這里插入圖片描述
對這個案例來說，這兩個寫法都行，scrollTo方法更靈活，還可以操作橫軸位置，但一般頁面都是上下滾動，所以兩種實現都可：

//document.documentElement.scrollTop = 0
window.scrollTo(0, 0)

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/75256.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/75256.shtml
英文地址，請注明出處：http://en.pswp.cn/web/75256.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！