vue 手写锚点及scrollIntoView方法

代码：

<ul class="anchorBox">

    <li v-for="item in fieldArr" :href="`#${item.quesField}`" @click="linkClick(`#${item.quesField}`)" :title="item.title" :Key="item.quesField">

          <a href="javascript:void(0);">{{item.title}}</a>

    </li>

</ul>

 

css:

.anchorBox{

    position: fixed;

    top: 70px;

    right: 20px;

    width: 400px;

    font-size: 13px;

    border-radius: 5px;

    padding: 10px 30px;

    background: #fff;

    box-shadow: 10px 10px 10px 10px #efefef;

    li{

      padding: 10px;

      a{

        color:#02396F

      }

    }

    li:hover{

      box-shadow: 10px 10px 10px 10px #efefef;

    }

    li:active{

      box-shadow: 10px 10px 10px 10px #efefef;

    }

    li:visited{

      box-shadow: 10px 10px 10px 10px #efefef;

    }

  }

js：

linkClick(id){//禁止跳转

      document.querySelector(id).scrollIntoView({

        behavior: "smooth",

        block: 'center',

        inline: 'center'

      });

    },

一、scrollIntoView方法

scrollIntoView是指让某个元素滚动到视图中。它是一个兼容性比较好的方法，可以在大多数浏览器和移动端上使用，但是在使用时需要注意一些问题。

使用scrollIntoView方法时，可以传递一个对象作为参数，对象的属性包括了一些控制选项，如：

element.scrollIntoView({
  behavior: 'smooth',
  block: 'center',
  inline: 'center'
});

其中，behavior属性控制滚动的状态，可以取值为“smooth”（平滑滚动）和“auto”（自动滚动）；block属性控制垂直方向上的位置，可以取值为“start”（在视口的顶部），“center”（在视口的中间）和“end”（在视口的底部）；inline属性控制水平方向上的位置，可以取值为“start”、“center”和“end”。

二、scrollIntoView问题

1. 一些浏览器上的错误

在使用scrollIntoView方法时，可能会出现一些问题。比如，Firefox浏览器在使用“center”选项时会出现偏移，Chrome浏览器在同样情况下没有这个问题。而且，在Safari上使用scrollIntoView方法时，会出现错误的滚动位置。如果使用了带有较大内边距的元素，可能会在某些浏览器上出现滚动延迟。因此，在使用scrollIntoView方法时，需要注意一些浏览器上可能存在的问题。

2. 必须处理元素不存在的情况

使用scrollIntoView方法时，需要注意处理元素不存在的情况。在这种情况下，会抛出一个异常，可能会严重影响程序的正常执行。因此，在使用scrollIntoView方法时，需要处理元素不存在的情况，以保证程序的健壮性。

3. scrollIntoView不能保证完全可见

scrollIntoView方法虽然可以将元素滚动到视图的可见区域，但并不能保证它完全可见。有时，元素可能会被遮挡，需要通过适当调整“block”和“inline”选项来解决。以及，如果在桌面浏览器中使用scrollIntoView，需要考虑是否在滚动之前，页面已经被滚动过，这会影响到可视性。

三、scrollIntoViewIfNeeded

scrollIntoViewIfNeeded方法用于判断某个元素是否在视图范围内，如果不在，才会通过scrollIntoView方法来滚动到视图中。如果元素已经在视图中，此方法则无效。这个方法支持的浏览器版本比scrollIntoView更少，但是对于需要保证元素可见的场景，这个方法可能比scrollIntoView更加合适。

四、scrollIntoView滚动效果

scrollIntoView方法提供了两种滚动效果：平滑滚动和自动滚动。

1. 平滑滚动

平滑滚动是指滚动时，无论是从哪个位置滚动到哪个位置，都会给人一种平滑的感觉，这种滚动效果比较适合在页面滚动较短距离的情况下使用。如果需要使用平滑滚动，可以在scrollIntoView方法中设置behavior属性为“smooth”，就可以实现平滑滚动效果。

element.scrollIntoView({
  behavior: 'smooth'
});

2. 自动滚动

自动滚动是指页面在滚动时没有人为干预，全部由程序自动完成。如果需要使用自动滚动，可以在scrollIntoView方法中将behavior属性设置为“auto”，这样，元素就会被自动滚动到视图的中央位置。

element.scrollIntoView({
  behavior: 'auto'
});

五、scrollIntoView mdn

如果需要查看scrollIntoView的详细说明，可以查看mdn上的文档。这里提供一个mdn上scrollIntoView的文档链接：

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

六、scrollIntoView元素上移问题

使用scrollIntoView方法时，有时可能会出现元素上移的问题，即滚动时元素在视图上方留有一定距离的情况。这个问题可以通过调整元素的样式来解决。

具体而言，可以给元素设置一个margin-top值，这样在滚动时，元素就会留出一定的空间。

/* 给元素设置margin-top值，避免上移问题 */
.element {
  margin-top: 50px;
}

七、scrollIntoView的坑

在使用scrollIntoView方法时，有一些坑需要注意。比如，在使用大量元素时，可能会导致滚动卡顿，这时候需要通过节流或者分页等方式来优化页面的性能。此外，在多个元素需要滚动到视图中时，可能会出现元素重叠的情况，需要适当调整视图的位置和元素的大小、位置等。

1. 页面卡顿

在使用scrollIntoView方法时，如果需要滚动大量元素时，可能会导致页面卡顿的现象。此时，可以使用节流、分页等方式，以减小页面的渲染负担。

2. 元素重叠

在使用scrollIntoView方法对多个元素进行滚动时，可能会出现元素重叠的情况。这时候需要适当调整元素的大小和位置，以确保它们能够正确地显示在视图中。

综上所述，scrollIntoView方法是一个非常实用的方法，可以让元素滚动到视图中，同时也能够控制滚动的效果。在使用时，需要注意一些兼容性问题和坑点，以确保程序的正确性和可读性