三个常用方案:
1.scrollintoView
把调用该方法的元素滚动到屏幕的指定位置,中间,底部,或者顶部
优点:方便,只需要获取元素然后调用
缺点:不好精确控制,只能让元素指定滚动到中间,顶部,底部,没法设置偏移
block可以设置为center,end,start等来控制在页面显示的位置。
注意的就是
<script setup>
import {onMounted, ref } from 'vue'
import {useRoute }from 'vue-router'
const { query }= useRoute();
const target = query.target
onMounted(()=>{document.getElementById(target)?.scrollIntoView({block:'center'})
})
</script><template><button>美妆</button><button>数码</button><button>美食</button><button>家居</button><button>黄金</button><div class="home" id="home">// 五个楼层<div class="part" id="part1">美妆</div><div class="part" id="part2">数码</div><div class="part" id="part3">美食</div><div class="part" id="part4">家居</div><div class="part" id="part5">黄金</div></div>
</template><style>
.home {width: 1000px;margin: 0 auto;height: 90vh;overflow-y: scroll;
}
.part {margin-top: 20px;border: 1px solid red;height: 600px;
}
.needData {height: 600px;
}
</style>
2.scrollTo
把可滚动元素滚动到指定x,y坐标优点:可以精确控制到具体多少px
缺点:得先获取到x,y坐标
需要注意的是,这个方法的调用者并不是要看到的元素,而是可滚动的元素。像方法一,调用scrollintoView方法的是五个楼层本身,但是如果是调用scrollTo的话是调用他们的父级元素(id="home"的div盒子)它才是可滚动的元素.
<script setup>
import {onMounted, ref } from 'vue'
import {useRoute }from 'vue-router'
const { query }= useRoute();
const target = query.target
onMounted(()=>{const targetDom = document.getElementById(target);const targetRect = targetDom.getBoundingClientRect();document.getElementById(home)?.scrollTo(targetRect.x, targetRect.y - 100);
})
</script><template><button>美妆</button><button>数码</button><button>美食</button><button>家居</button><button>黄金</button><div class="home" id="home"><div class="part" id="part1">美妆</div><div class="part" id="part2">数码</div><div class="part" id="part3">美食</div><div class="part" id="part4">家居</div><div class="part" id="part5">黄金</div></div>
</template>
3.scrollBy
滚动指定的x,y距离。也就是让他滚动一定距离,不指定坐标
优点:当我们只是做移动,而不是滚到某个指定的元素时
缺点:得自己算出多少距离
这个方法用的少就不举例了
最后:要注意的点,记住这么几个操作
1,如果是打开就滚动到指定位置,vue/react项目一定要在你页面数据渲染完成后滚动
2,如果不含有请求,记得在onMounted(vue),或者useEffect(react)中进行滚动操作,如果是页面滚动,可能还要在加一个小延迟(setTimeout)
3,如果页面的数据是请求来的,请确保数据渲染完成后进行滚动
页面滚动是会记录上一次滚动状态的,在页面渲染好后又会滚回去。记录页面滚动这个现象一般只限于同步引入的组件,异步的不会(没有滚动记录)