vue3 内容过多出现滚动条时滚动条自动定位到末端的操作代码

 更新时间:2024年05月31日 11:20:53   作者:饱饱~~  
这篇文章主要介绍了vue3 内容过多出现滚动条时滚动条自动定位到末端的操作代码,本文给大家介绍的非常详细,需要的朋友参考下吧

vue3 内容过多出现滚动条时滚动条自动定位到末端的操作代码

当内容过多时,其实已经有了滚动条,但视觉上并看不出,要求自动定位到滚动条末端

需要在滚动元素上设置滚动条的位置,使用ref

<div class="top" ref="tagRef">
    <el-tag
        type="ghost"
        size="large"
        v-for="tag in selectTag"
        :key="tag.id"
        :closable="true"
        style="padding-left: 8px; padding-right: 8px"
        @close="() => handleClose(tag)"
    >
        {{
              tag.show ||
              (Array.isArray(tag.prompt)
                ? tag.prompt.join(',')
                : tag.prompt)
            }}
          </el-tag>
        </div>
const tagRef = ref();
watch(selectTag.value, async() => {
  await nextTick();
  const topElement = tagRef.value;
  if(topElement) {
    topElement.scrollTop = topElement.scrollHeight;
  }
});

扩展:前端vue3-手动设置滚动条位置/自动定位

从B页面进行xx操作后需要跳转到A页面,并定位到AA职位,上图为A页面。

A页面的左侧是div,内层包裹List组件

给div定义ref=leftRef,在代码中写如下:

  function scrollTop() {
    if (leftRef.value) {
      console.log('99', leftRef.value);
      nextTick(() => {
        leftRef.value.scrollTop = 1000;
        // scrollBy(0, document.body.scrollWidth);
      });
    }
  }
onMounted(async () => {
    if (router.currentRoute.value.query.id) {
      positionChooseCode.value = router.currentRoute.value.query.id;
      positionStatusValue.value = router.currentRoute.value.query.id;
    }
    const positionId = router.currentRoute.value.query.positionId;
    if (!!positionId) {
      cStore.setPositionId(positionId);
    }
    console.log('mounted--positionId', positionId);
    await getPositionDictionary(positionChooseCode.value, '');
    await getDictionaries();
    scrollTop();
  });

第一,需要等待数据渲染完成后,再调用scrollTop,设置scrollTop=1000,这样页面初始化滚动条位置会改变。

第二,找到当前职位的高度,也要等职位列表数据渲染完成后,获取

    console.log('positionList.value', positionList.value);
    rowItemId.value = item.id;
    //找到前面有多少个元素
    let index = positionList.value.findIndex((it) => it.id === rowItemId.value);
    console.log('找到前面有多少个元素', index + 1);
    num.value = index - 2;
获取当前职位,当前职位会有class==red的,通过class获取ele;
 const sortableEles = document.querySelectorAll('.red');
      console.log(sortableEles);
      let itemHeight = 0;
      if (sortableEles.length > 0) {
        const firstListItem = sortableEles[0];
        itemHeight = firstListItem.offsetHeight; // 获取元素的高度,包括内边距和边框
        console.log('第一个列表项的高度:', itemHeight);
        console.log(' num.value', num.value);
      }
 

完整的scrollTop方法如下

总结:

滚动条要滚动起来
选中含有滚动条的元素,定义一个const leftRef = ref(null),在数据加载完成后设置leftRef.value.scrollTop

滚动条的位置
等待数据加载完后获取当前选中的元素,通过.offsetHeight获取元素的高度

到此这篇关于vue3 内容过多出现滚动条时,滚动条自动定位到末端的文章就介绍到这了,更多相关vue3 滚动条自动定位到末端内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • element el-upload文件上传覆盖第一个文件的实现

    element el-upload文件上传覆盖第一个文件的实现

    这篇文章主要介绍了element el-upload文件上传覆盖第一个文件的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue中jsencrypt与base64加密解密的实用流程

    vue中jsencrypt与base64加密解密的实用流程

    vue项目里面使用到的加密和解密的方法,本文主要介绍了vue中jsencrypt与base64加密解密的实用流程,具有一定的参考价值,感兴趣的可以了解一下
    2023-10-10
  • 前端开发指南之vue-grid-layout的使用实例

    前端开发指南之vue-grid-layout的使用实例

    vue-grid-layout是一个vue栅格拖动布局的组件,下面这篇文章主要给大家介绍了关于前端开发指南之vue-grid-layout使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • vue Echarts实现仪表盘案例

    vue Echarts实现仪表盘案例

    这篇文章主要为大家详细介绍了vue Echarts实现仪表盘案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue中router-view无法显示的解决办法

    Vue中router-view无法显示的解决办法

    这篇文章主要给大家介绍了关于Vue中router-view无法显示的解决办法,router-view组件作为vue最核心的路由管理组件,在项目中作为路由管理经常被使用到,需要的朋友可以参考下
    2023-07-07
  • Vue.js组件tab实现选项卡切换

    Vue.js组件tab实现选项卡切换

    这篇文章主要为大家详细介绍了Vue.js组件tab实现选项卡切换的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 使用Vue和React分别实现锚点定位功能

    使用Vue和React分别实现锚点定位功能

    这篇文章主要为大家详细介绍了如何使用Vue和React分别实现锚点定位功能,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以学习一下
    2024-01-01
  • springboot+vue实现文件上传下载

    springboot+vue实现文件上传下载

    这篇文章主要为大家详细介绍了springboot+vue实现文件上传下载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • vue图片拖拉转放大缩小组件使用详解

    vue图片拖拉转放大缩小组件使用详解

    这篇文章主要为大家详细介绍了vue图片拖拉转放大缩小组件的使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • Vue分页插件的前后端配置与使用

    Vue分页插件的前后端配置与使用

    这篇文章主要为大家详细介绍了Vue分页插件的前后端配置与使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10

最新评论