Content scrolling based on elementUI scroll bar el-scrollbar

Requirements: The form filling information is too long, the submit button needs to be always in the visible area at the top, and the company information is always displayed at the bottom without being covered, so it is required to only fill in the middle content part, and the scroll bar of the filling information needs to scroll the content

Realization effect:

Components:

<template>
  <div class="scrollbar-container">
    <el-scrollbar class="scroll" id="scrollContent" :style="{ height: height ,width:width}">
      <slot></slot>
    </el-scrollbar>
  </div>
</template>

<script>
import { calculateHeight } from "@/utils/calcHeight";
export default {
  props: {
    //要减去高度的div的class  el-scrollbar下面的div
    cutClassNames:{
      type:Array,
      default:()=>[]
    }
  },
  components: {},
  data() {
    return {
      height: "100%",
      width:"100%",
    };
  },
  created() {},
  mounted() {
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy(){
     window.removeEventListener("resize",this.handleResize);
  },
  watch: {
    cutClassNames: {
      handler(val) {
         this.handleResize();
        
      },
      immediate:true
    },
  },

  methods: {
   handleResize(){
    this.$nextTick(()=>{
       this.height=calculateHeight(this.cutClassNames,50)+"px";
    })
   },
  },
};
</script>
<style lang="scss" scoped>

</style>

Calculate the height of the scroll area: calcHeight.js


export const caculateOtherHeight=function(cutClassNames=[]) {
    let total = 0;
    if( cutClassNames&& cutClassNames.length>0){
       cutClassNames.forEach((className) => {
        const h =document.getElementsByClassName(className)[0].offsetHeight || 0;
        total = total + h;
      });
    }
   return total;
  }
  //计算减后的实际高度
  export const calculateHeight=function(cutClassNames=[],cutHeight=0) {
    let otherHeight=caculateOtherHeight(cutClassNames);
    const windowHeight = window.innerHeight; // 窗口高度
    const top = document.getElementById("scrollContent").getBoundingClientRect().top;//滚动区域到顶部距离
    const pageContent = document.getElementById("pageContent");
    let bottomPx = window.getComputedStyle(pageContent).paddingBottom||0;
    let bottomPxM=window.getComputedStyle(pageContent).marginBottom||0;
    const bottom = Number(bottomPx.replace("px", "") || 0);
    const bottomM=Number(bottomPxM.replace("px", "") || 0);
    const total = top + bottom+bottomM + otherHeight;
    const height = windowHeight - total-cutHeight;
   
    return  height;
  }
  export const handleWindowOnresize=function(){
    window.onresize = () => {
        return (() => {
        
          calculateHeight();
        })();
      };
  }

Note: Add id="pageContent" to the main content area Reference el-table scroll bar processing based on ElementUI_Holly31's blog-CSDN blog

Page usage:

 <blScrollContent >
    <el-form>
    滚动内容
    </el-form>
</blScrollContent>

Global style modifies scroll bar style:

If you don’t write this, there will be problems with the horizontal scroll bar display.

  .el-scrollbar__wrap{
    overflow-x: auto;
    padding-bottom: 20px;
    height: calc(100% + 20px); 
  }

Content scrolling based on elementUI scroll bar el-scrollbar

Guess you like