可视区外的div快速滚动到可视区上方

原创已于 2023-06-16 15:55:02 修改 · 301 阅读

0 ·

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

收录于

css

JS基础

于 2023-05-22 15:12:39 首次发布

这段代码展示了一个Vue.js组件，用于在事件列表中遍历div元素。当点击某个div时，它会应用样式selectEvent并使用scrollIntoView方法平滑滚动到该元素，确保其在视口内可见。同时，内容根据item的数据动态渲染，包括事件内容、等级、类型和上报人员信息，部分过长的内容通过el-tooltip组件进行省略显示。

scrollIntoView

// 遍历出来的div 
<div
                v-for="(item, index) in eventList"
                :key="index"
                :class="eventId === item.id ? 'selectEvent' : 'eventItem'"
                @click="openDetails(item.id, 'left')"
              >
                <div
                  class="eventTitle"
                  :style="eventId === item.id ? 'font-weight: bold;' : ''"
                >
                  {{
                    item.content.length < 16
                      ? item.content
                      : item.content.substr(0, 16) + "..."
                  }}
                </div>
                <div style="display: flex">
                  <div class="eventTips">
                    事件等级 ：<span class="eventContent">{{
                      item.levelName
                    }}</span>
                  </div>
                  <div class="eventTips">
                    事件类型 ：<span
                      v-if="item.typeName !== null && item.typeName.length < 5"
                      class="eventContent"
                      >{{ item.typeName }}</span
                    >
                    <el-tooltip
                      v-else
                      class="item"
                      effect="dark"
                      :content="item.typeName"
                      placement="top"
                    >
                      <span class="eventContent"
                        >{{
                          item.typeName ? item.typeName.substring(0, 4) : ""
                        }}...</span
                      >
                    </el-tooltip>
                  </div>
                  <div class="eventTips">
                    上报人员 ：<span
                      v-if="item.reportPerson.length < 5"
                      class="eventContent"
                      >{{ item.reportPerson }}</span
                    >
                    <el-tooltip
                      v-else
                      class="item"
                      effect="dark"
                      :content="item.reportPerson"
                      placement="top"
                    >
                      <span class="eventContent"
                        >{{ item.reportPerson.substring(0, 4) }}...</span
                      >
                    </el-tooltip>
                  </div>
                </div>
                <div class="eventBottom">
                  <!-- 左侧列表的 指挥调度 按钮 -->
                  <span class="eventContent">{{ item.createTime }}上报</span>
                  <div @click.stop="goDetailsItem(item.id)">
                    <i class="iconfont if-biaodancaozuo-shenshu" />
                    指挥调度
                  </div>
                </div>
              </div>

看下面这一块就可以了

       /* 将可视区外的div移动到可视区范围内 */
        this.$nextTick(() => {
          let selectEventDom = document.querySelector('.selectEvent')
          selectEventDom.scrollIntoView({ behavior: 'smooth' });
        })

标签

#数学建模 #servlet