1. 首頁 > 生活 > >

js獲取滾動條的高度 js獲取頁面滾動距離

小知識



文章插圖
js獲取滾動條的高度 js獲取頁面滾動距離

文章插圖
那些不常見，但卻非常實用的JS知識點（下） 本篇
二、element（DOM 對象）
1、element 屬性和方法
1.1、clientHeight / clientWidth 屬性
clientHeight:元素內部的高度，包含內邊距，但不包括水平滾動條、邊框和外邊距 。
clientWidth:元素內部的寬度，包含內邊距，但不包括垂直滾動條、邊框和外邊距 。
此屬性會將獲取的值四舍五入取整數 。
document.querySelector("span").clientWidthclientHeight 和 clientWidth 支持性一致
1.2、scrollHeight / scrollWidth 屬性
類似于上方的 clientHeight / clientWidth，不同在于 clientHeight / clientWidth 在元素設置 overflow 后，不包含隱藏不可見的高度部分 。而 scrollHeight / scrollWidth 卻包含隱藏的那部分高度 。
我覺得利用這個特性來判斷是否超長，如果 scrollWidth 大于 clientWidth，則表示超長，此時可以對于那些超長后顯示…的元素在浮上去后展示一個自定義的 toolip.
scrollHeight 和 scrollWidth 支持性一致
1.3、getBoundingClientRect()方法
返回元素的大小及其相對于視口的位置(眼睛看得見的文檔區域) 。
這個方法超級好用 。不管你的元素在什么位置，它都會計算出來當前元素 相當于 視口的邊緣的位置，和滾動條無關 。
返回值為
{bottom: xx,//元素底部離視口頂部的距離height: xx,//元素高度，和元素的clientHeight屬性一致，但比它精確，會保留小數left: xx,//元素左邊離視口左側的距離right: xx,//元素右邊離視口左側的距離top: xx,//元素上部離視口頂部的距離width: xx,//元素寬度，和元素的clientWidth屬性一致，但比它精確，會保留小數}
這個方法的支持性為 100%， 良心啊，為什么我才知道這個方法?
1.4、scrollIntoView()方法
如果父元素定義了 overflow，并產生了滾動條，里面有個子元素，在滾動條滑動后，看不到了 。那么可以讓這個子元素執行這個方法，讓元素滾動到父元素可視區域內 。
可以定義滾動條可視區域的頂部，底部，還是左邊，右邊 。
也可以定義平滑的滾動過來，還是一瞬間滾動過來 。
這個方法的好處是自動計算里面的元素距離可見區域多少，不需要給數值進行人為干涉，而 scroll()或 scrollTo()方法，必須人為計算滾動條的距離，然后給個數值，才能滾動到某個位置 。
首先看個例子，
div1 超過屏幕的區域有個 div2，超過 div2 的區域有個 span1，此時我們可以通過調用 span1 元素的 scrollIntoView 方法，讓 span1，滾動到 div2 的可見區域，也就是向左邊滾動，但是有個壞處，就是 div1 也會向上滾動，直到 div2 能被用戶看到 。
而 scroll()或 scrollTo()方法在 span1 滾動到 div2 的可見區域時，div1 不動 。不會產生其他附加作用，直到你慢慢滑屏，才會看到 span1，已經停留在 div2 的可視范圍了 。
1.5、scroll() / scrollTo() / scrollBy() 方法
scrollTo 方法可以使界面滾動到給定元素的指定坐標位置 。
以產生滾動條的那個父元素為基準，
scroll() scrollBy() scrollTo()合稱為 scrollOptions API
2、element 事件
2.1、contextmenu 事件
contextmenu 事件會在用戶嘗試打開上下文菜單時被觸發 。該事件通常在鼠標點擊右鍵或者按下鍵盤上的菜單鍵時被觸
【js獲取滾動條的高度 js獲取頁面滾動距離】<p id="noContextMenu">這個段落右鍵菜單已被禁用 。</p>noContext = document.getElementById('noContextMenu');noContext.addEventListener('contextmenu', e => {e.preventDefault();});單擊右鍵，不會出現標準的右鍵菜單項目
2.2、copy 事件/cut 事件/ paste 事件
dom 的復制/剪切， 粘貼事件 。
<div class="source">Try copying text from this box...</div><div class="target" contenteditable="true">...and pasting it into this one</div>let sourceDom = document.querySelector(".source");sourceDom.addEventListener("copy", function (e) {//將數據存入剪切板e.clipboardData.setData("abc", "Hello, world!");e.preventDefault();});let targetDom = document.querySelector(".target");targetDom.addEventListener("paste", function (e) {//從剪切板取出來let data = http://www.mnbkw.com/jxjc/190588/e.clipboardData.getData("abc");//自定義轉化數據data = http://www.mnbkw.com/jxjc/190588/data.toUpperCase();//獲取光標位置const selection = window.getSelection();if (!selection.rangeCount) return false;selection.deleteFromDocument();//將轉換后的數據插入到光標位置selection.getRangeAt(0).insertNode(document.createTextNode(data));e.preventDefault();});這三個事件支持性一致
2.3、focusin 事件 / focusout 事件
當元素獲得焦點時，focusin 事件被觸發 。
focusin 事件和 focus 事件之間的主要區別在于 focus 不會冒泡 。
當元素即將失去焦點時，focusout 事件被觸發 。
focusout 事件和 blur 事件之間的主要區別在于 blur 不會冒泡 。
2.4、onscroll / onwheel
類似于 window 的 onscroll 和 onwheel 。只不過綁定對象為 element
let sourceDom = document.querySelector(".source");sourceDom.addEventListener("scroll", function (e) {console.log("111");});sourceDom.addEventListener("wheel", function (e) {console.log("111");});三、document（文檔對象）
1、document 屬性和方法
1.1、characterSet
返回當前文檔的字符編碼，但有相當一部分瀏覽器未實現，可使用原始的 charset 代替
document.characterSet || document.charset1.2、compatMode
表明當前文檔的渲染模式是怪異模式/混雜模式還是標準模式 。
document.compatMode // BackCompat怪異模式， CSS1Compat標準模式
1.3、defaultView
返回當前 document 對象所關聯的 window 對象，如果沒有，會返回 null 。
document.defaultView //返回還是window，我為什么不直接 使用window呢？上面的代碼很平淡，不足為奇，可是下面的就不一定了
<div class="source" style="height: 200px; overflow: auto;"><object type="text/html" style="width: 100%; height: 100%;"> </object></div>let doc = document.querySelector("object").contentDocument; //得到一個document對象doc.defaultView; //接著得到一個window得到這個 window 后，有什么用呢？
我們可以想象一個場景，當我們縮放 window 窗口時，會觸發 window 的 onresize 事件，但是縮放 div，卻不會觸發 onresize 事件，因為 dom 沒有 onresize，那么如何監聽一個 div 的 resize 呢？
就是上述的方式，在 div 中套一個 object 。我不監聽 div，我監聽 div 中的 object，一旦 div 變了，object 不也就變了嗎？
然后通過 object 返回的一個 window 對象，就自然可以綁定 onresize 事件了
document.querySelector("object").contentDocument.defaultView .addEventListener("resize", () => {//只要div尺寸變化，object尺寸就變化，resize就能監聽到 。不管何種原因導致的尺寸變化 。都會監聽到 。});除此之外，我有一遍專門介紹如何徹底解決 div 尺寸變化問題的文章，有興趣的伙伴可以閱讀
1.4、designMode
控制整個文檔是否可編輯 。有效值為 “on” 和 “off”。
默認值為 “off”。如果設置為”on”，則好比給 html 所有的元素都添加了 contenteditable 屬性 。
1.5、documentElement
會返回文檔對象（document）的根元素 。
可以通過document.documentElement.clientHeight 來獲取瀏覽器的可用高度，這個高度和 html 或者 body 的 style 上的 height 無關，只與瀏覽器的上方地址欄，下方工具欄等有關，和 window.innerHeight 相等 。
2、document 事件
2.1、onscroll / onwheel
類似于 window 的 onscroll 和 onwheel 。只不過綁定對象為 document
document.addEventListener("scroll", function (e) {console.log("111");});document.addEventListener("wheel", function (e) {console.log("111");});