活跃标签遮挡问题（已解决iOS滚动兼容问题）

一生只爱婉儿

已于 2022-04-28 19:15:32 修改

阅读量443

点赞数

分类专栏：解决方案文章标签： javascript

于 2022-04-28 17:36:07 首次发布

本文链接：https://blog.csdn.net/Victor20190424/article/details/124473849

版权

本文探讨了在制作标签交互时遇到的活跃标签被遮挡的问题，指出scrollIntoView()方法存在的不足，如可能引发外层容器滚动和iOS兼容性问题。作者提供了一个手动实现的解决方案，该方案已在阿里系App中应用。

摘要由CSDN通过智能技术生成

1、问题描述

当我们制作标签的交互效果时，经常会遇到点击后活跃标签被遮挡的问题，这时需要将活跃标签展示出来。有同学可能用过 scrollIntoView() 这个方法，可以直接将被遮挡的元素展示出来，但这个方法坑实在太多（比如可能带动外层容器上下滚动，并且存在一些iOS兼容性问题）。所以这里手动实现了相关问题的解决方案。本解决方案已经应用于：阿里系App。

2、代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel=&