網頁包含三個 div。
div 的 CSS 設定：
box-sizing: border-box;
width: 300px;
height: 500px;
margin: 20px auto;
padding: 10px;
border: 5px solid #eee;每個 div 的高度為：border + padding + 內容 = 500px
第一個 div 跟第二個 div 之間的 margin + 第二個 div 跟第三個 div 之間的 margin(div 之間的 margin 會重疊)：20px + 20px
再加上第一個 div 的 margin(top) 跟最後一個 div 的 margin(bottom)：20px + 20px
全網頁高度為：20px + 500px + 20px + 500px + 20px + 500px + 20px = 1580px
JS 的部份，document.documentElement 指的是 html 元素。
跟著 Udemy 的課程 JavaScript Web Projects: 20 Projects to Build Your Portfolio 做練習。
這個練習是從 Unsplash 的 API 取得圖片，當捲軸快滑到底部時，再次從 API 取得圖片。
在 JS 裡有監聽 scroll 事件。
scroll 事件會連續觸發，導致連續跟 Unsplash API 要圖檔，為了避免這個狀況，可以新增一個變數(imgLoadedStatus)當作開關，值為布林值。
在桌機使用瀏覽器(縮小視窗寬度後)觀看頁面不會出現水平捲軸，但手機的瀏覽器會。
即使已經在 body 設定 overflow-x: hidden; 也沒有作用。
解決方式是用一個 div(.wrapper) 把內容包起來，並在該 div 使用 overflow-x: hidden;
<div class="wrapper">
<header class="header">
<nav>
...
</nav>
<video autoplay loop muted>
...
</video>
<div class="video-overlay">
...
</div>
</header>
<main>
<div class="container">
...
</div>
</main>
</div>GitHub
https://github.com/yuanhuang-tw/video-background
Demo
https://yuanhuang-tw.github.io/video-background/
[補充]
乃綠茶 > Front-End Developers Taiwan
前端踩雷編
HTML5 video 只要在屬性加上 playsinline, muted
原則上就可以在原地自動播放，不會滿版。(iOS, Android 皆是)
最近遇到部份同事、客戶的裝置無法自動播放。
第一時間一定就是查 iOS 版本，Safari 版本，寫各種測試，結果都無效。
結果同事查了才發現
iOS 在省電模式下，不會自動播放影片
Android Chrome 在減少數據用量模式下也是
參考連結：
