监听竖线一直在底部vue2

最新推荐文章于 2024-09-21 11:29:05 发布

️小圆子

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量86

点赞数

文章标签： vue.js 前端 javascript css

本文链接：https://blog.csdn.net/qq_55681529/article/details/131431246

版权

该文章描述了一个网页布局问题，其中竖线需固定在页面的一个特定区域内，且当该区域有滚动条时，竖线应随着滚动条的滚动而同步移动。解决方案涉及到使用CSS设置绝对定位以及JavaScript监听滚动事件来调整竖线的位置。

摘要由CSDN通过智能技术生成

要做一个竖线固定在固定区域上，占满固定区域的顶部到底部，固定区域会有滚动条，滚动条滚动的时候竖线要跟随吧变化

首先看看效果

解决办法

body代码

<div class="liebiao" name="scrollBox">
            <div
              style="
                height: 100%;
                overflow: auto;
                position: absolute;
                width: 100%;
              "
              class="div_box"
            >
              <div class="left_content"></div>
              <div class="right_content"></div>
            </div>
            <div v-for="o in topLists" :key="o.id" class="item">
              <el-tooltip effect="dark" placement="top" popper-class="tool-tip">
                //提示内容插槽
                <div slot="content" style="max-width: 600px">
                  {{ o.content }}
                </div>
                <div>
                  {{ o.content }}
                </div>
              </el-tooltip>
              <!-- 鼠标滑过出现删除修改按钮 -->
              <div class="button_group">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  @click="Import_accounts(6, o.id, o.content, 1)"
                  circle
                  size="mini"
                ></el-button>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="deleteField(2, o.id)"
                  size="mini"
                ></el-button>
              </div>
            </div>
          </div>

js代码

 // 监听竖线
    updateScrollTop() {
      let a = document.querySelector(".liebiao");
    let a1 = document.querySelector(".div_box");
    console.log(a);
    a.addEventListener("scroll", function (e) {
      console.log(a.scrollTop);
      a1.style.marginTop = a.scrollTop + "px";
    });
    },

挂载到生命周期上

  mounted() {
   this.updateScrollTop()
  },

css代码

      .liebiao {
        position: relative;
        height: calc(100vh - 45vh);
        overflow-y: auto;

        .left {
          position: absolute;
          left: 31.5%;
          bottom: 0;
          height: 100%;
          border: 1px solid #dcdfe6;
        }
        .left_content{
          position: absolute;
          left: 33%;
          bottom: 0;
          height: 100%;
          border: 1px solid #dcdfe6;
          z-index: 999;
        }
        .right {
          position: absolute;
          right: 35%;
          bottom: 0;
          height: 100%;
          border: 1px solid #dcdfe6;
        }
        .right_content{
          position: absolute;
          right: 34%;
          bottom: 0;
          height: 100%;
          border: 1px solid #dcdfe6;
          z-index: 999;
        }
        .item {
          height: 55px;
          margin: 5px 0;
          width: 33%;
          float: left;
          text-align: center;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          line-height: 30px;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1; /* 这里是超出几行省略 */
          padding-right: 10px;
          padding-left: 10px;
          box-sizing: border-box;
        }
        }
      }