vue scrollTop 無法賦值

dreamGong 發(fā)布于2019-08-23 14:12 / 1252人閱讀

摘要：一直在底部則可以設(shè)置成功解決方案需要用到的地方調(diào)用即可滾動到底部參考文章無法監(jiān)聽事件參考代碼

遇到問題

container.scrollTop 一直為0不能賦值

  watch: {
    historyList () {
      this.$nextTick(() => {
        const container = this.$el.querySelector(".scrolldivmain")
        console.log(container.scrollHeight)
        console.log(container.scrollTop)
        this.$refs.scrolldiv.scrollTo(0, container.scrollHeight + "px")
        container.scrollTop = container.scrollHeight
        container.scrollTop(0, container.scrollHeight)
        console.log(container.scrollTop) // container.scrollTop 一直為0
      })
    }
  }

注意點

確定下滾動條是在哪里顯示的
有個方法判斷下：

    window.addEventListener("scroll", () => {
        var scrollTop = this.$el.querySelector(".scrolldivmain")
        // console.log(scrollTop.scrollHeight)
        console.log(scrollTop.scrollTop) // 查看打印的值是否有變化 如果有 則說明滾滾動條在這個標簽中
        // scrollTop.scrollTop = scrollTop.scrollHeight // 可以嘗試下 滾動滾動條。一直在底部則可以設(shè)置成功
    }, true)

解決方案

需要用到的地方調(diào)用this.scrollToBottom()即可




    some code

methods: {
  // 滾動到底部
    scrollToBottom () {
      this.$nextTick(() => {
        setTimeout(() => {
          var scrollTop = this.$el.querySelector(".scrolldivmain")
          scrollTop.scrollTop = scrollTop.scrollHeight
        }, 13)
      })
    }
}

參考文章

vue 無法監(jiān)聽scroll事件
參考vue-chat代碼

GPU云服務(wù)器云服務(wù)器 scrollTop Vue_Vue Vue vue3 學(xué)習筆記 (五)——vue3

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100254.html

相關(guān)文章

Web前端開發(fā)過程踩過的坑以及一些小方法技巧（持續(xù)更新）

摘要：一上瀏覽器使用不允許事件代理到上選擇器以上綁定可能會出現(xiàn)點擊失效的情況。對于，如果工具是以下版本，在中加入以下代碼以上的版本加入以下代碼八開發(fā)對于文件的處理問題。解決方法有給元素設(shè)置絕對定位即可。元素換成內(nèi)聯(lián)元素，如。一、iOS上瀏覽器使用jQuery不允許事件代理到document上 $(document).on(click, 選擇器, function(){}); 以上綁定可能...

arashicage 2019-08-23 15:13 評論0 收藏0
Web前端開發(fā)過程踩過的坑以及一些小方法技巧（持續(xù)更新）

摘要：一上瀏覽器使用不允許事件代理到上選擇器以上綁定可能會出現(xiàn)點擊失效的情況。對于，如果工具是以下版本，在中加入以下代碼以上的版本加入以下代碼八開發(fā)對于文件的處理問題。解決方法有給元素設(shè)置絕對定位即可。元素換成內(nèi)聯(lián)元素，如。一、iOS上瀏覽器使用jQuery不允許事件代理到document上 $(document).on(click, 選擇器, function(){}); 以上綁定可能...

binta 2019-08-02 14:15 評論0 收藏0
Web前端開發(fā)過程踩過的坑以及一些小方法技巧（持續(xù)更新）

摘要：一上瀏覽器使用不允許事件代理到上選擇器以上綁定可能會出現(xiàn)點擊失效的情況。對于，如果工具是以下版本，在中加入以下代碼以上的版本加入以下代碼八開發(fā)對于文件的處理問題。解決方法有給元素設(shè)置絕對定位即可。元素換成內(nèi)聯(lián)元素，如。一、iOS上瀏覽器使用jQuery不允許事件代理到document上 $(document).on(click, 選擇器, function(){}); 以上綁定可能...

張春雷 2019-08-30 15:55 評論0 收藏0
vue結(jié)合preventDefault()和頁面滾動高度計算，解決ios橡皮筋效果

摘要：第一種方法我嘗試了，覺得不是很好用，而且頁面的滑動變得卡頓，橡皮筋效果還是時而出現(xiàn)，因此考慮第二種辦法。由上面的定義可知，當頁面滑動到頂部時，為，當頁面出現(xiàn)橡皮筋時，小于當頁面滑動到底部時，。感謝的啟發(fā)，方法很有用！好幾個月以前，我寫了一個類似于自動回復(fù)那種的客服頁面，嵌入到公司開發(fā)的app里。上周測試突然找到我，說頁面在滑動的時候，輸入框也會跟著上下滑動，而這個...

JerryWangSAP 2019-08-23 14:09 評論0 收藏0
vue 解決無法設(shè)置滾動位置的問題

摘要：問題描述在實現(xiàn)錨點定位的時候發(fā)現(xiàn)無法設(shè)置滾動條的位置。在中，使用無法設(shè)置滾動條的高度。一直是原因因為的頁面指定了，即指定了時，使用。工作不僅僅是工作完成任務(wù)，是一個自己發(fā)現(xiàn)自身問題，提升能力和對自己的技術(shù)實操實踐的過程。問題描述在實現(xiàn)錨點定位的時候發(fā)現(xiàn)無法設(shè)置滾動條的位置。在Vue中，使用 document.body.scrollTop=952 無法設(shè)置滾動條的高度。 document....

番茄西紅柿 2019-04-23 13:20 評論0 收藏0