vue 解決無法設置滾動位置的問題

番茄西紅柿發布于2019-04-23 13:20 / 3451人閱讀

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

問題描述

在實現錨點定位的時候發現無法設置滾動條的位置。

在Vue中，使用 document.body.scrollTop=952 無法設置滾動條的高度。

document.body.scrollTop一直是0

原因

因為vue的頁面指定了DTD，即指定了DOCTYPE時，使用document.documentElement。

頁面沒有DTD，即沒指定DOCTYPE時，使用document.body。

解決方案

document.documentElement=956

2018年10月10號新增

上面僅僅是說這個頁面的滾動條高度的設定，當我頁面內的一個div的滾動條設定他的高度如下解決方案

var anchor = this.$el.querySelector(.message-list)
      this.$nextTick(() => {
        document.querySelector(.message-list).scrollTop = anchor.scrollHeight
 })

這個解決方案在我做ng的時候又出現過類似的問題，我前大佬告訴我的，當時只是為了解決問題并沒有了解其原理，復制進來就過去了。

現在做vue了，才知道哦，為什么要這樣寫，所以說項目太趕，只是為了完成任務，對個人能力并沒有提升，做完了就過了，還要解決其他的bug，其他的任務，現在能夠靜下來在工作過程中學習+進步，對個人的發展才是好的。工作不僅僅是工作完成任務，是一個自己發現自身問題，提升能力和對自己的技術實操實踐的過程。

此隨筆乃本人學習工作記錄，如有疑問歡迎在下面評論，轉載請標明出處。

如果對您有幫助請動動鼠標右下方給我來個贊，您的支持是我最大的動力。

GPU云服務器云服務器解決阿里云服務器無法訪問80端口的問題無法訪問您試圖使用的功能所在的網絡位置無法訪問您要使用的功能所在的網絡位置解決問題的方法

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

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

Vue 實踐過程中的幾個問題

摘要：前言本篇是我在使用過程中，遇到的幾個小問題和之前不了解的東西，記錄下來，希望能夠幫助各位踩坑。小結上面就是我分享的幾個小問題，希望大家看了能夠有所收獲另明年準備去上海，如果小伙伴的公司有坑，可以聯系一下我。前言本篇是我在使用vue過程中，遇到的幾個小問題和之前不了解的東西，記錄下來，希望能夠幫助各位踩坑。如果喜歡的話可以點波贊，或者關注一下，希望本文可以幫到大家。本文首發于我的個...

DevTalking 2019-08-22 14:01 評論0 收藏0
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
基于better-scroll的vue滾動組件

摘要：讓用戶可以滾動頁面。事件中拿到想要的后瀏覽器已經隱藏地址欄和工具欄，放開插件滾動。發現派發的方法在父組件中監聽后獲取位置參數的效果不太好必須要手指貼著滑動才可以這個設置為可以實時派發滾動事件和位置參數其他坑點待發現歡迎大佬一起交流寫在前面由于最近一個移動端項目中許多地方有滾動需求, 橫向,縱向的都有,所以就基于better-scroll封裝了一個通用的滾動組件,期間也踩了一些坑,有...

xiaotianyi 2019-08-23 18:09 評論0 收藏0