關於iframe中使用fixed定位的一些問題

十字裡發表於2018-09-30

先來看看position: fixed;的定義:生成絕對定位的元素,相對於瀏覽器視窗進行定位;

但是在iframe中使用fixed定位,實際上是相對於iframe視窗進行定位,原因在於iframe類似於建立了一個瀏覽器視窗,在使用一些獲取滑鼠位置以及元素位置等方法的時候把iframe當作瀏覽器視窗來處理就行。

以下是一些在iframe中使用fixed需要考慮的常用js事件物件屬性與方法:

獲取滑鼠的位置:

    e.clientY // 獲取滑鼠在瀏覽器視窗的Y座標,在iframe中相對於iframe視窗

    e.screenY  // 獲取的是滑鼠相對於螢幕的上邊距,不考慮iframe因素,

獲取元素的偏移量:

    var position = Object.getBoundingClientRect();  //用於獲取某個元素相對於瀏覽器視窗的位置集合,在iframe中相對於iframe視窗

      position.top  //獲取元素 “頂部” 距離瀏覽器視窗 “頂部” 的距離

      position.bottom  //獲取元素 “底部” 距離瀏覽器視窗 “頂部” 的距離

      position.left //獲取元素 “左側” 距離瀏覽器視窗 “左側” 的距離

      position.right  //獲取元素 “右側” 距離瀏覽器視窗 “左側” 的距離

   Object.offsetTop  //獲取元素距離 最近含有 ”定位“ 屬性標籤左側的距離

相關文章