windows -- 大小滾動 · 前端知識 -- 學習整理

>[success] # windows -- 大小和滾動 >[danger] ##### 瀏覽器窗口大小獲取 1. **innerWidth、innerHeight**：獲取window窗口的寬度和高度（包含滾動條） 2. **outerWidth、outerHeight**：獲取window窗口的整個寬度和高度（包括調試工具、工具欄） 3. **documentElement.clientHeight、documentElement.clientWidth**：獲取html的寬度和高度（不包含滾動條）**說明** `documentElement` 是`<html>` 標簽因此獲取`html`標簽的寬度和高度也相當于獲取了window 窗口的寬度和高度 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { height: 100px; overflow: scroll; width: 100px; } </style> </head> <body> <script> const windInnerWidth = window.innerWidth const windInnerHeight = window.innerHeight console.log(windInnerWidth, windInnerHeight) const windOuterWidth = window.outerWidth const windOuterHeight = window.outerHeight console.log(windOuterWidth, windOuterHeight) // 利用獲取html 標簽寬度和高度 const htmlHight = document.documentElement.clientHeight const htmlWidth = document.documentElement.clientWidth console.log(htmlWidth, htmlHight) </script> </body> </html> ~~~ ![](https://img.kancloud.cn/11/d0/11d01c344b659b566919c7b1b72731de_957x943.png) >[danger] ##### 滾動 1. **scrollX**：X軸滾動的位置或 **pageXOffset** 2. **scrollY**：Y軸滾動的位置或 **pageYOffset** ~~~ <!DOCTYPE html> <html lang="en" style="height: 200%"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style></style> </head> <body> <script> window.onclick = function () { console.log(window.scrollX) console.log(window.scrollY) } </script> </body> </html> ~~~ >[danger] ##### 滾動到指定位置 1. **方法 scrollBy(x,y)** ：將頁面滾動至相對于當前位置的 (x, y) 位置； 2. **方法 scrollTo(pageX,pageY)** 將頁面滾動至絕對坐標