溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編這次要給大家分享的是vue如何實現編輯器鍵盤抬起時內容跟隨光標距頂位置向上滾動效果，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
最近遇到了之前沒有碰到過的一個問題：編輯器輸入內容時，最好讓內容一直保持在可視區域，比如如果區域超出的話，就在鍵盤抬起時向上滾動一定距離。
這個和聊天發消息還有一定的區別，聊天的話是只要點開輸入框，就將內容定位到最下面： 即 dom.scrollTop = dom.scrollHeight即可，但是這個需要移動的是一部分距離，經過討論最好是讓當前光標的位置在鍵盤抬起時達到可視區域的最上面
那么這個距離肯定是根據光標的距離頂部位置決定的，但是光標距離頂部的距離我并沒有度到如何獲取，于是就自己瞎摸索，就有了接下來的解決辦法
原理是利用的是光標屬性可以拿到當前基于該屬性的dom結構，就可以通過當前dom距離頂部的offsetTop值判斷內容本身在鍵盤抬起時到底向上滾多少
廢話不多說，上代碼
let sel = window.getSelection();獲取光標的所有屬性
通過打印它的一些屬性我們可以拿到一些我們所需要的東西（當前dom）
console.log(sel.getRangeAt(0).commonAncestorContainer.parentElement)
這個拿到的就是你當前的dom元素，只需要拿到它的offsetTop即可判斷界面到底向上滾動多少
但是有的時候可能當前的屬性是個行標簽，拿不到offsetTop，那么我們可以找到基于它的父級塊標簽，我這里的上一級就是塊標簽，所以只需執行
sel.getRangeAt(0).commonAncestorContainer.parentElement.parentNode.offsetTop
就可以拿到想要的值
再通過
this.$nextTick(() => {
dom.scrollTop = ket;
});這里聲明必須在nextTick里進行操作才能更改成功，否則是沒有效果的
完整demo
let sel = window.getSelection();
let ket = sel.getRangeAt(0).commonAncestorContainer.parentElement.offsetTop;
if(ket==0){//行標簽
ket = sel.getRangeAt(0).commonAncestorContainer.parentElement.parentNode.offsetTop
}
this.$nextTick(() => {
dom.scrollTop = ket;
});或者通過三元拿值
let ket = sel.getRangeAt(0).commonAncestorContainer.parentElement.offsetTop==0?sel.getRangeAt(0).commonAncestorContainer.parentElement.parentNode.offsetTop:sel.getRangeAt(0).commonAncestorContainer.parentElement.offsetTop;
this.$nextTick(() => {
dom.scrollTop = ket;
});這樣試反正我是成功了，這里說一下鍵盤抬起不抬起不是我判斷是，是由app端調用我的方法告知我的，希望小伙伴們不要走彎路....
看完這篇關于vue如何實現編輯器鍵盤抬起時內容跟隨光標距頂位置向上滾動效果的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
