VUE根據ref來獲取元素or元件的滾動條位置。

2021-09-11 09:05:00 字數 1337 閱讀 7535

vue根據ref來獲取元素or元件的滾動條位置。

滾動條根據展示塊的滑動來變更長度or位置

思路1.編寫原生js**:

mounted () ,

methods:else

}, },

方法不可行,原生js在元素獲取上有錯誤(大概是沒找到正確的寫法),

思路2.使用ref和$refs來註冊元素從而使用scrollleft來獲取滾動條的橫向位置(x軸位置)

html:

script:

mounted () ,

methods:,

},

一直以來對offsetleft,offsettop,scrollleft,scrolltop這幾個方法很迷糊,花了一天的時間好好的學習了一下.得出了以下的結果:

1.offsettop :

當前物件到其上級層頂部的距離.

不能對其進行賦值.設定物件到頁面頂部的距離請用style.top屬性.

2.offsetleft :

當前物件到其上級層左邊的距離.

不能對其進行賦值.設定物件到頁面左部的距離請用style.left屬性.

3.offsetwidth :

當前物件的寬度.

與style.width屬性的區別在於:如物件的寬度設定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetwidth則返回在不同頁面中物件的寬度值而不是百分比值

4.offsetheight :

與style.height屬性的區別在於:如物件的寬度設定值為百分比高度,則無論頁面變大還是變小,style.height都返回此百分比,而offsetheight則返回在不同頁面中物件的高度值而不是百分比值

5.offsetparent :

當前物件的上級層物件.

注意.如果物件是包括在乙個div中時,此div不會被當做是此物件的上級層,(即物件的上級層會跳過div物件)上級層是table時則不會有問題.

利用這個屬性,可以得到當前物件在不同大小的頁面中的絕對位置.

6.scrollleft :

物件的最左邊到物件在當前視窗顯示的範圍內的左邊的距離.

即是在出現了橫向滾動條的情況下,滾動條拉動的距離.

7.scrolltop

物件的最頂部到物件在當前視窗顯示的範圍內的頂邊的距離.

即是在出現了縱向滾動條的情況下,滾動條拉動的距離.

—by csdn lulijunit(感謝指導)

Vue使用ref 屬性來獲取DOM

注意,在父元件中可以使用this.refs.屬性名 獲取任何元素的屬性和方法,子元件不可以獲取父元件中的 點選 h1 ref chuandi 中國是偉大的祖國 h1 hr log ref mylog log div template id log div input type button valu...

vue 使用ref獲取DOM元素和元件引用

在vue中可以通過ref獲取dom元素,並操作它,還可以獲取元件裡面的資料和方法。html部分 1 div id 2 input type text value input 的值 ref myinput 3 h3 id h3 ref myh3 這是h3 h3 45 hr 6 com1 ref myc...

vue3如何通過ref屬性獲取元素

在vue2.x中,可以通過給元素新增ref 屬性,然後在 中通過this.refs.獲取到對應的元素 然而在vue3中時沒有 refs這個東西的,因此vue3中通過ref屬性獲取元素就不能按照vue2的方式來獲取 vue3需要借助生命週期方法,原因很簡單,在setup執行時,template中的元素...