vue scrollTop 無(wú)法賦值

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

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

遇到問(wè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
      })
    }
  }

注意點(diǎn)

確定下滾動(dòng)條是在哪里顯示的
有個(gè)方法判斷下：

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

解決方案

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




    some code

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

參考文章

vue 無(wú)法監(jiān)聽(tīng)scroll事件
參考vue-chat代碼

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/100254.html

相關(guān)文章

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

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

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

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

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

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

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

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

JerryWangSAP 2019-08-23 14:09 評(píng)論0 收藏0
vue 解決無(wú)法設(shè)置滾動(dòng)位置的問(wèn)題

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

番茄西紅柿 2019-04-23 13:20 評(píng)論0 收藏0