之前在一次开发中,用到scrollIntoView方法,但遇到神奇的事情,居然无法生效。。。。
在一顿猛烈的排查下才发现该方法
需要页面完全加载后才能生效
,以下是避免踩雷的方法
运用vue中的this.$nextTick方法
this.$nextTick(()=>{
document.getElementById(target).scrollIntoView();
利用setTimeout方法
setTimeout(function(){
document.getElementById(target).scrollIntoView();
},100)
最后希望能帮到你
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIn...
可正确滚动,并且将这句放入onMounted也可正确实现移动效果,起初意外是dom元素获取出现了问题,后多次测试发现是smooth的问题,改成auto即可实现滚动,但无过渡效果。在滚动后无法移动到元素位置,并且不报错,但是在控制台输入。
dom.scrollIntoView({
behavior: "smooth",
block: "nearest", //"start",// | "center" | "end" | "nearest", // 默认
inline: "nearest"
背景:左菜单栏,右内容栏,点击左菜单栏,右边自动滚动到指定位置,其中右边固定高度,超出显示scroll。
解决:调用scrollIntoView后,再修改下scrollTop
document.documentElement.scrollTop = document.documentElement.scrollTop - 1;
官方文档写的简单:
Element 接口的scrollIntoView()方法会滚动元素的父容器,使被调用scrollIntoView()的元素对用户可见。
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop);// Boolean型参数
element.scrollIntoView(scrollIntoViewOptions);// Object型参数
今天需要做一个点击icon滑动到文章评论区的功能,采用了scrollIntoView,发现在移动端偶现失效了。
代码如下:
commentRef.current.scrollIntoView({
behavior: 'smooth',
思考1 是否由于浏览器bug导致
据这篇博文描述是由于滑动过程中进行了原生事件的监听就会阻断事件继续执行。
因此替换成 scollTo,发现滑动有改善,但是还是有定位不准的问题。
根据这个回答得出可以采用 requestAnimatio
我的框架是react hook 开发
useEffect(() => {
const anchorElement = document.getElementById('current-module'); // 第一步获取到滚动元素
if (selectModuleIndex === 0 && anchorElement) {
anchorElement.scrollTop
第一种:常见 锚链接,id和 href 结合起来
<div id="one" style="height: 300px;">第一</div>
<div id="two" style="height: 300px;">第二</div>
<a href='#one'>回到第一</a>
<a href='#two'>回到第二</a>
在vue项目中可能会导致第一次点击没有效果,第二次点击才跳到对应位置,
因为在 r
TheElement.scrollIntoView()method scrolls the current element into the visible area of the browser window. Parameters can be provided to set the position inside the visible area as well as whether s...
这时只要把scrollIntoView()改成scrollIntoView(false)就可以解决了。参数为true:调用该函数,页面发送滚动,使element的顶部与视图(容器)顶部对齐。element.scrollIntoView() 参数默认为true。element.scrollIntoView() 参数默认为true。scrollIntoView是一个与页面(容器)滚动相关的API。参数为false:使element的底部与视图(容器)底部对齐。我是直接获取的 大家请看。