美文网首页
「vue」解决锚点定位,url变化问题 (滑动)

「vue」解决锚点定位,url变化问题 (滑动)

作者: ybrelax | 来源:发表于2018-11-29 18:34 被阅读0次

    项目中遇到这样一个问题,本来是想通过锚点定位来实现快速定位的效果,但是发现一个问题(url变化了😭)

    所以我的解决方案为:

     <a :class="{'isactive' : index === '热'}" name="index"> {{index}} </a>
    
     document.querySelector("a[name=index]").scrollIntoView(true);  
    

    scrollIntoView() :
    这个方法传入true作为参数,或者不传,那么窗口滚动之后会让调动元素的顶部和视窗顶部尽可能齐平
    这个方法传入false作为参数,调用元素会尽可能全部出现在视口中(有可能的话,元素底部会与视口顶部齐平)不过顶部不一定齐平。
    argument:
    对象: { behavior: "smooth"} : 这个参数可以让你的滑动更加丝滑哦
    scrollIntoView 官方文档:https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

    • css 中 scroll-behavior:smooth; 这个可以让你的滑动更加丝滑
    • scrollITo(x, y) 也可以处理滑动
      x: x轴的偏移量
      y: y轴的偏移量

    相关文章

      网友评论

          本文标题:「vue」解决锚点定位,url变化问题 (滑动)

          本文链接:https://www.haomeiwen.com/subject/jeafcqtx.html