【JavaScript系列】vue項目中實現滾動條（具體視窗口的滾動條）操作：（1）置底，（2）置于

lovXin 發布于2019-08-26 14:00 / 2396人閱讀

摘要：滾動條不會出現在頭部和底部視窗中。新增功能滾動條置底分頁加載的時候，保持滾動條置于上次停留的位置。我們來看一下動態圖，實現的功能今天只把這個具體視窗口的滾動條的總結一下，其他兩個問題，沒有很大的意義。

一、前言

之前寫了一個happyChat的項目，主要是想學習一下socketIO的使用。然后最近在給happyChat做前端優化和升級。發現第一版做的很low。

需要優化的問題：

1、問題1：滾動條會出現在頭部和底部的視窗中，之前固定頭部和固定底部是使用`position:fixed`。

解決方案：body和html禁止`overflow:hidden`，頭部和底部是`position:relative`，聊天視窗使用`overflow: auto`，這樣聊天視窗才會出現滾動條。滾動條不會出現在頭部和底部視窗中。

2、問題2：聊天視窗一次性加載了所有的聊天內容，如果數據太多會出現超時的問題。

解決方案：聊天內容查詢使用分頁查詢，一次性查詢20條或者30條。

3、問題3：群聊的時候，找不到群成員列表。

解決方案：做一個群信息匯總的組件，包括群成員列表。

新增功能：（1）滾動條置底；（2）分頁加載的時候，保持滾動條置于上次停留的位置。

項目【前端】源代碼地址：https://github.com/saucxs/hap...

項目【后端】端源代碼地址：https://github.com/saucxs/hap...

歡迎fork和start。

線上地址：http://chat.chengxinsong.cn/

二、具體【視窗口】的滾動條的問題

環境：vue

我們先來看一下，給滾動條添加監聽事件，必須在created或者mouted周期中，添加scroll的監聽事件。

 mounted: function () {
    window.addEventListener("scroll", this.handleScroll, true);  // 監聽（綁定）滾輪滾動事件
  },

其中handleScroll事件是methods里的事件：

 handleScroll() {
      this.viewBox = this.$refs.viewBox;
      console.log(this.viewBox.scrollTop, "到頭部的距離-------------------")
      console.log(this.viewBox.scrollHeight, "滾動條的總高度-------------------")
    }

注意：div 到頭部的距離 + 屏幕高度 = 可滾動的總高度
this.$refs.viewBox取到視窗口的dom對象，必須確定dom加載完畢了。

如果我們想置底，我們必須將【滾動條總高度】賦值給【滾動條到頭部的距離】。這樣就置底了。

業務是這樣的：（1）當進入到聊天頁面時候，這時候置底。（2）如果翻看之前的聊天記錄，這時候就不需要置底，保持在當前的位置。

1、先解決【進入到聊天頁面時候，這時候置底】的問題

解決方案：（1）全局設置一個標志位，如果是第一次進入，【標志位為置底】，執行置底方法。（2）如果是翻看之前聊天記錄，【標志位改為不置底】，不執行置底方法。（3）監聽內容變化方法，判斷標志位是啥，然后看是否執行置底方法。

watch: {
    message() {
      this.viewBox = this.$refs.viewBox
      if(this.type == "bottom"){
        this.refresh();
      }
    }
},

refresh就是一個置底方法。

refresh() {
      setTimeout(() => {
            this.viewBox.scrollTop = this.viewBox.scrollHeight
    }, 100)
},

2、如果翻看之前的聊天記錄，這時候就【不需要置底，保持在當前的位置】

如果不置底，就是一直在保持在頂部。

思路：將加載之前的【數據高度】（此時滾動條的總高度）存放在臨時變量beforeScrollHeight中；將數據加載之后的到【頭部的距離】 = 【此時滾動條總高度】- 【臨時變量beforeScrollHeight】。

看一下代碼實現：

監聽message值變化

watch: {
   message() {
      if(this.type == "bottom"){
        this.refresh();
      }else{
        this.nofresh()
      }
  }
},

主要看nofresh方法

 nofresh() {
      setTimeout(() => {
        this.afterScrollHeight = this.viewBox.scrollHeight - this.beforeScrollHeight;
        this.viewBox.scrollTop = this.afterScrollHeight;
      }, 100)
},

加載更多的方法

 loadMore() {
     this.beforeScrollHeight = this.viewBox.scrollHeight;
     // 分頁請求數據，包裝數據。
 }

我們來看一下動態圖，實現的功能

今天只把這個具體視窗口的滾動條的總結一下，其他兩個問題，沒有很大的意義。

【上述源碼地址】項目地址：https://github.com/saucxs/hap... ，歡迎fork和start。

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

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

css - 收藏集 - 掘金

摘要：絕對底部前端掘金來自國外的設計達人，純，可以實現當正文內容很少時，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設計達人，純CSS，可以實現: 當正文內容很少時，底部位于窗口最下面。當改變窗口高度時，不會出現重疊問題。甚至，創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案...

phpmatt 2019-08-29 12:41 評論0 收藏0
國內存在感最低的前端API——瀏覽器路由

摘要：最新一直在看關于和路由這塊的知識，最終發現這些路由框架的模塊功能的實現都是基于瀏覽器原生路由的。在瀏覽器中實現前端路由主要有兩種方式一個是我們常用的，另一個是提供的。該對象的和分別表示的各個部分，它們因此被稱為分解屬性。最新一直在看關于 Vue 和 React 路由這塊的知識，最終發現這些路由框架的模塊功能的實現都是基于瀏覽器原生路由 API?的。本著追根溯源的初心，于是就想著將瀏覽...

U2FsdGVkX1x 2019-08-23 17:10 評論0 收藏0
國內存在感最低的前端API——瀏覽器路由

摘要：最新一直在看關于和路由這塊的知識，最終發現這些路由框架的模塊功能的實現都是基于瀏覽器原生路由的。在瀏覽器中實現前端路由主要有兩種方式一個是我們常用的，另一個是提供的。該對象的和分別表示的各個部分，它們因此被稱為分解屬性。最新一直在看關于 Vue 和 React 路由這塊的知識，最終發現這些路由框架的模塊功能的實現都是基于瀏覽器原生路由 API?的。本著追根溯源的初心，于是就想著將瀏覽...

tolerious 2019-08-29 18:44 評論0 收藏0
JavaScript 編程精解中文第三版十五、處理事件

摘要：事件與節點每個瀏覽器事件處理器被注冊在上下文中。事件對象雖然目前為止我們忽略了它，事件處理器函數作為對象傳遞事件對象。若事件處理器不希望執行默認行為通常是因為已經處理了該事件，會調用事件對象的方法。來源：ApacheCN『JavaScript 編程精解中文第三版』翻譯項目原文：Handling Events 譯者：飛龍協議：CC BY-NC-SA 4.0 自豪地采用谷歌翻譯部分...

Clect 2019-08-23 18:19 評論0 收藏0