基于elementUI滚动条el-scrollbar内容滚动

关注

已于 2023-07-24 14:44:06 修改 · 1.2k 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

vue结合element ui实现文字消息上下无缝滚动切换最近项目里需要个消息翻滚一条条出现的效果，如下图：正在用原生js操作的时候，突然想起element ui有个走马灯（Carousel），这个走马灯可以实现前端比较常用的轮播效果，那肯定也能实现这个功能消息无缝翻滚出现的功能。话不多说，下面放代码： html部分：  <div class="bs-sysMsg" v-if="systemMsg.length > 0"> <i class=" 阅读详情

需求：表单填写信息过长，提交按钮在顶部需要一直在可视区，公司信息也固定显示在底部不被遮盖，于是要求只要中间内容部分，填写信息滚动条滚动内容

实现效果：

组件：

<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>

计算滚动区域高度：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();
        })();
      };
  }

注：主内容区域加id="pageContent" 参考基于ElementUI的el-table滚动条处理_Holly31的博客-CSDN博客

页面使用：

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

全局样式修改滚动条样式：

不写这个，横向滚动条显示会有问题

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

标签

#elementui #前端 #javascript

vue中滚动文字公告（1）-elementUI走马灯思路：把每条公告内容看成是走马灯的一个item，去掉左右箭头，去掉指示器，上下滚动用vertical，水平滚动用horizontal 优势：实现简单劣势：效果单一 html部分 <el-card class="notice"> <el-carousel indicator-position="none" arrow="never" direction="vertical" :interval="5000"> <el-carousel-item 阅读详情

基于elementUI滚动条el-scrollbar内容滚动

相关推荐