vue scrollTop 無法賦值

dreamGong 發布于2019-08-23 14:12 / 1248人閱讀

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

遇到問題

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 // 可以嘗試下 滾動滾動條。一直在底部則可以設置成功
    }, true)

解決方案

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




    some code

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

參考文章

vue 無法監聽scroll事件
參考vue-chat代碼

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100254.html

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

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

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

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

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

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

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

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

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

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

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