Determine whether the list scrolls according to the height of the screen

The effect that needs to be achieved is to judge whether the list can be scrolled according to the height of the screen

At the beginning, I just added a scrolling effect to this list with css.
When it is in full screen, a lot of list data has exceeded the screen, and the scrolling effect added by this css appears. It can be used normally when there is a fixed height

. Make the height of the entire browser smaller, and then scroll the list, it can no longer be scrolled, so we need to change its height to a dynamic value

1. Add an id to the list

2. Define the variable of screen height in data

data() {
    
    
    return {
    
    
      fullHeight: document.documentElement.clientHeight，
      timer:false//节流
    };
  },

3. Monitor fullHeight in the watch

watch: {
    
    
    fullHeight(val) {
    
    
      if (!this.timer) {
    
    
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
    
    
          that.timer = false;
        }, 400);
      }
    }
  },

4. Get id and add height dynamically

mounted() {
    
    
    window.onresize = () => {
    
    
      return (() => {
    
    
        var that = this;
        window.fullHeight = document.documentElement.clientHeight;
        that.fullHeight = window.fullHeight;
        var menuHeight = document.getElementById("menu");
        menuHeight.style.height = that.fullHeight - 100 + "px";
      })();
    };
  },

Ok, so no matter how the height of the screen changes, the list can be scrolled hahahahahahahaha