记录一段经常会忘记的但很好用的代码

前言

来记录一段经常会忘记的但很好用的代码，主要是为了以后好找。

Web平滑滚动代码

// 平滑滚动publicscrollTo(id:string){constel=document.getElementById(id);if(el){el.scrollIntoView({behavior:'smooth',block:'center'});}}

behavior: 定义滚动动画，可以是"auto"、“smooth"或"instant”。
block: 定义垂直对齐方式，可以是"start"、“center”、“end"或"nearest”。
inline: 定义水平对齐方式，也可以是"start"、“center”、“end"或"nearest”。

Web监听页面滚动选中左侧导航栏

letthat=this;// 创建Observer实例constobserver=newIntersectionObserver(entries=>{entries.forEach(entry=>{if(entry.isIntersecting){// 监听到元素进入视口letidx=Number(entry.target.id.replace('serviceItems',''));if(that.clickIndex<0){that.activeKey=idx;}elseif(that.clickIndex===idx){that.clickIndex=-1;}}});},{threshold:[0.2]}// 20% 可见时触发);this.$nextTick(()=>{// 开始观察元素this.listData.forEach((item,index)=>{letel=document.querySelector(`#serviceItems${index}`);observer.observe(el);});});

uni-app页面滚动

uni.pageScrollTo({selector:'#target-element',duration:300});

参数名	类型	必填	说明
scrollTop	Number	否	滚动到页面的目标位置（单位px）
selector	String	否	元素选择器，用于指定要滚动到的元素位置，App、H5、抖音小程序2.62.0+、微信小程序2.7.3+ 、支付宝小程序1.20.0+支持
duration	Number	否	滚动动画的时长，默认300，单位 ms
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

结语

关注我，不迷路。
不定时分享前端相关问题以及解决方案。
希望能帮助每个在开发类似功能的小伙伴。