scrollIntoView 方法用于将元素的滚动容器的可视区域滚动到该元素处。它通常用于实现页面内的锚点跳转功能,使得用户能够平滑地滚动到页面的特定部分。 如何实现scrollIntoView的动画过渡效果 scrollIntoView 方法可以通过其 behavior 选项来控制滚动行为,从而实现动画过渡效果。behavior 选项有两个可选值: auto:表示没有平滑的滚...
导航固定,导航上锚点定位,滚动条滚动有动画效果。 实现方法: 1)最简单的莫过于用a标签的href="#要跳转的id名"即可,不过这种会造成页面的刷新 2)用scrollIntoView()来做,不过这个api是相对于浏览器顶部对齐的。由于我们的导航是固定定位,那么在进行滚动的时候,导航会盖着模块的部分内容(导航高度),就导致我们看起来...
element.scrollIntoView({behavior: "smooth"}) 最终实现方案: 切换Tab实现内容滚动到指定锚点: methods: {// 滚动到指定位置scrollToElePosition(index) {const{ first, second, third, fourth, fifth } =this.$refs;// 记录当前滚动状态this.isSmoothScrolling=true;// 动画时间constSCROLL_DURATION=500;if(inde...
element.scrollIntoView({behavior: "smooth"}) 最终实现方案: 切换Tab实现内容滚动到指定锚点: methods: {// 滚动到指定位置scrollToElePosition(index) {const{ first, second, third, fourth, fifth } =this.$refs;// 记录当前滚动状态this.isSmoothScrolling=true;// 动画时间constSCROLL_DURATION=500;if(inde...
最终选择: 1. 使用window作为滚动区域,不使用scrollIntoView,而是直接通过scrollTop赋值来实现滚动效果 方案一CSS代码:可实现 顶部Tab 和 滚动区域的严格区分 .page-container{position: relative;overflow: hidden;height:100%;display: flex;flex-direction: column;header{// 顶部固定模块width:100%;height:1.8rem; ...