zoukankan      html  css  js  c++  java
  • vue div 设置滚动条位置 一直在底部

    效果:每发布一条信息,滚动条自动滚动到最新消息位置

     代码:

    html:

      <div class="maquee" id="maquee">
                <ul>
                  <li class="messageitem" v-for="item in socketForm.msgData  ">
                    内容…………………………
                  </li>
                </ul>
              </div>

    css:  父div有设置固定高度和overflow:none,所以这里需要设置overflow-y:auto

    .maquee{
      height: 100%;
      width: 110%;
      display: block;
      overflow-y:auto;
      overflow-x: hidden;
    }

    ts:

    因为消息是动态增加的,所以

      ulheight:any=0;//保存滚动条位置
      /**
       * 记录滚动条位置  内容增加完成后调用
       */
      getScroll() {
        $(".message").css('height', '32%');
        var temp = $(".maquee ul");
        var temp1 = temp[0].scrollHeight;
        this.ulheight= temp1;
      //这里要取.
    maquee 里面ul的scrollheight,因为maquee已经固定高度了,只有取ul的scrollheight才能取到准确的内容高度
    } 

    /*设置滚动条位置*/
    updated() {
       this.$nextTick(() => {
       var container = this.$el.querySelector('.maquee');
       // @ts-ignore
       container.scrollTop = this.ulheight;
      
    })
    }
  • 相关阅读:
    3.node.js AssertionError: false == true错误解决
    9.获取当前时区时间和utc时间的工具方法
    2.Express封装mysq方法
    1.Express初识
    poj 3617
    前缀和
    pop 反序列化
    Reverse前两个题
    前两个Web题
    Misc
  • 原文地址:https://www.cnblogs.com/luo1240465012/p/15177017.html
Copyright © 2011-2022 走看看