前言
来记录一段经常会忘记的但很好用的代码，主要是为了以后好找。
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 | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
结语
关注我，不迷路。
不定时分享前端相关问题以及解决方案。
希望能帮助每个在开发类似功能的小伙伴。
