欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React SPA 应用 hash 路由如何使用锚点

程序员文章站 2022-08-05 20:38:44
当我们在做 SPA 应用的时候,为了兼容老的浏览器(如IE9)我们不得不放弃 HTML5 browser history api 而只能采用 hash 路由的这种形式来实现前端路由,但是因为 hash 被路由占据了,导致本来不是问题的锚点功能却成了一个不大不小的问题。 经过我自己的搜索目前有两种方式 ......

当我们在做 spa 应用的时候,为了兼容老的浏览器(如ie9)我们不得不放弃 html5 browser history api 而只能采用 hash 路由的这种形式来实现前端路由,但是因为 hash 被路由占据了,导致本来不是问题的锚点功能却成了一个不大不小的问题。

经过我自己的搜索目前有两种方式能够解决这个问题,为了能在 react 生态下面简单优雅的使用,我专门封装了一个锚点组件 ,它使用了类似原生 a 标签的写法,并且可以支持滚动的距离和指定滚动的元素,尽可能的满足业务的需求。

不过在介绍这个组件之前,还是得先说一下两种基本的解决方案。

两种解决方案

scrollintoview

scrollintoview 方法可以让当前的元素滚动到浏览器窗口的可视区域内。
它的使用方法如下:

var element = document.getelementbyid("box");

element.scrollintoview();

这个 api 兼容 ie8 及以上的浏览器,所以可以放心使用。

注:ie10 之前的 ie 浏览器部分支持,具体请查看can i use

scrolltop

另一个方法是使用 scrolltop 这个 api,这个方法的兼容性也是比较好的,这个方法相比于 scrollintoview 来说需要你自己定义要滚动的元素和要滚动的高度,虽然看起来麻烦一些,但是好处是*度比较高,试想一下下面的场景:

  • 你有一个 a 元素在 content 里面,content 设置了滚动,你想让 a 元素滚动到可视区域内。

React SPA 应用 hash 路由如何使用锚点

  • 如果用 scrollintoview 会变成下面这样,a 元素显示到整个浏览器视口的最上面,这样就会和 header 重合,被遮挡住一部分。

React SPA 应用 hash 路由如何使用锚点

  • 所以这时候需要使用 scrolltop 去设置 content 滚动距离,比如说是 60px,最后的效果就变成了我们想要的结果。

React SPA 应用 hash 路由如何使用锚点

使用方式如下:

const cont = document.queryselector('#container');
const a = document.queryselector('#a');

cont.scrolltop = a.offsettop + 60;

以上两种方式如果想方便的在项目里面使用多少都需要封装一下,而且使用起来和原生的 a 标签形式也相差甚远。

但是如果是在 react 技术栈下,我们可以利用组件来封装一个类似 a 标签的锚点,这样在使用形式上,我们就能更接近于原生的方式,降低使用成本。

于是我写了这个 react 组件,兼容以上两种方案,让你能够非常简单的实现锚点,如果使用了该组件的话,上面的实现方式就会变成下面这样:

import anchor from 'react-anchor-without-hash'

// ......

const anchorprops = {
  type: 'scrolltop',
  container: '#container',
  interval: 60
}

<div id="container" style={{position: 'relative', overflow: 'scroll'}}>
  <anchor name="a" {...anchorprops}>
    <div>
      <h2>this is a</h2>
      <div>there are some text...</div>
    </div>
  </anchor>
</div>

这时候你只需要在页面的地址栏输入: http://somehost/path/#hash?_to=a 页面就会让 a 滚动到你想要的位置啦!

github:

demo:

codesandbox:

欢迎讨论和star!!!