vue在hash路由模式下实现点击定位滑动

背景:一般是使用锚点来实现dom的定位,但在hash模式下,这种方式不行,会刷新路由,没法实现dom定位的效果。

其实scrollIntoView就可以解决这个问题,scrollIntoView可以将调用它的元素滚动到浏览器窗口的可见区域。

代码实现:

css 复制代码
<!--html模块-->
<div class="bottom-wrapper">
        <div class="left">
            <div @click="goToDom(item.value)" v-for="(item,index) in menuList" :key="index" class="menu-item">
                <span>{{item.name}}</span>
            </div>
        </div>
        <div class="right">
            <div class="scroll-container">
                <div class="scroll-page" ref="modelA">
                    <div class="head">模块1</div>
                 </div>
                <div class="scroll-page" ref="modelB">
                    <div class="head">模块2</div>
                 </div>
                <div class="scroll-page" ref="modelC">
                    <div class="head">模块3</div>
                 </div>
            </div>
</div>
css 复制代码
//关键方法
//跳转到指点的位置
 const goToDom = (refName) => {
        proxy.$refs[refName].scrollIntoView({block: 'start', behavior: 'smooth'});
  }
css 复制代码
    .bottom-wrapper {
        display: flex;
        margin: 10px;
        scroll-behavior: smooth;
        height: calc(100% - 365px);

        .left {
            width: 150px;
            @include box-ht;
            display: flex;
            flex-direction: column;
            align-items: center;

            .menu-item {
                margin: 5px 0;
                border-bottom: 1px solid $theme-bg;
                padding-bottom: 5px;
                color: #000000;
                &:hover{
                    cursor: pointer;
                }
            }
        }

        .right {
            margin-left: 10px;
            width: calc(100% - 150px);
            height: 100%;

            .scroll-container {
                /* 核心代码:缓慢滚动过渡 */
                scroll-behavior: smooth;
                display: block;
                height: 100%;
                overflow-y: scroll;
            }

            .scroll-page {
                position: relative;
                @include box-ht;
                margin: 10px 0;

                .head {
                    font-weight: bold;
                    border-bottom: 1px solid $theme-bg;
                    padding-bottom: 5px;
                }
            }
        }
    }
相关推荐
MiyueFE17 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子21 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
「、皓子~1 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了1 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_1 小时前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟2 小时前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计