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 滚动条自动定位到末端内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue路由重定向和别名的示例代码

    Vue路由重定向和别名的示例代码

    在Vue.js应用开发中,Vue Router 提供了许多特性来简化前端路由管理和用户体验,其中一个重要的特性便是路由重定向和别名,它们可以帮助我们更好地管理和组织路由,本文将详细介绍如何在Vue Router中使用路由重定向和别名,需要的朋友可以参考下
    2024-09-09
  • 详解TypeScript+Vue 插件 vue-class-component的使用总结

    详解TypeScript+Vue 插件 vue-class-component的使用总结

    这篇文章主要介绍了TypeScript+Vue 插件 vue-class-component的使用总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • vue长列表优化之虚拟列表实现过程详解

    vue长列表优化之虚拟列表实现过程详解

    前端的业务开发中会遇到不使用分页方式来加载长列表的需求,下面这篇文章主要给大家介绍了关于vue长列表优化之虚拟列表实现的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • vue中el-upload上传图片到七牛的示例代码

    vue中el-upload上传图片到七牛的示例代码

    这篇文章主要介绍了vue中el-upload上传图片到七牛的示例代码,实现思路其实也很简单,需要从后台获取七牛token上传图片到七牛,具体示例代码大家跟随小编一起学习吧
    2018-10-10
  • Vue源码之关于vm.$delete()/Vue.use()内部原理详解

    Vue源码之关于vm.$delete()/Vue.use()内部原理详解

    这篇文章主要介绍了Vue源码之关于vm.$delete()/Vue.use()内部原理详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • vue使用exif获取图片旋转,压缩的示例代码

    vue使用exif获取图片旋转,压缩的示例代码

    这篇文章主要介绍了vue使用exif获取图片旋转,压缩的示例代码,帮助大家更好的利用python处理图片,感兴趣的朋友可以了解下
    2020-12-12
  • 一文搞定vue3中的函数式弹窗

    一文搞定vue3中的函数式弹窗

    函数式弹窗是一种使用函数来创建弹窗的技术,它可以简化弹窗的使用,只需要在需要弹窗的地方调用函数就可以了,下面我们就来看看vue3中函数式弹窗的具体应用吧
    2024-01-01
  • vue常用指令实现学生录入系统的实战

    vue常用指令实现学生录入系统的实战

    本文主要介绍了vue常用指令实现学生录入系统的实战,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • vue实现鼠标滑动预览视频封面组件示例详解

    vue实现鼠标滑动预览视频封面组件示例详解

    这篇文章主要为大家介绍了vue实现鼠标滑动预览视频封面组件示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 对Vue.js之事件的绑定(v-on: 或者 @ )详解

    对Vue.js之事件的绑定(v-on: 或者 @ )详解

    今天小编就为大家分享一篇对Vue.js之事件的绑定(v-on: 或者 @ )详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论