javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 前端滚动到指定位置

前端滚动锚点三个常用方案(点击后页面滚动到指定位置)

作者:Gaga ❀

这篇文章主要给大家介绍了关于前端滚动锚点的三个常用方案,实现的效果就是点击后页面滚动到指定位置,三种方法分别是scrollIntoView、scrollTo和scrollBy,文中通过代码介绍的非常详细,需要的朋友可以参考下

三个常用方案:

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,如果页面的数据是请求来的,请确保数据渲染完成后进行滚动

页面滚动是会记录上一次滚动状态的,在页面渲染好后又会滚回去。记录页面滚动这个现象一般只限于同步引入的组件,异步的不会(没有滚动记录)

总结 

到此这篇关于前端滚动锚点三个常用方案的文章就介绍到这了,更多相关前端滚动到指定位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文