快捷導(dǎo)航

使用Vue和React分別實(shí)現(xiàn)錨點(diǎn)定位功能

更新時(shí)間：2024年01月11日 11:06:59 作者：heiyay

這篇文章主要為大家詳細(xì)介紹了如何使用Vue和React分別實(shí)現(xiàn)錨點(diǎn)定位功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以學(xué)習(xí)一下

前言

最近接到一個(gè)需求，修改某某頁面，增加XXX功能，并實(shí)現(xiàn)個(gè)錨點(diǎn)功能。做產(chǎn)品就是不斷優(yōu)化，增加功能的過程。實(shí)現(xiàn)錨點(diǎn)的方式很多，很多UI庫也提供了組件，可以根據(jù)自己的需求調(diào)整一下組件庫也可以實(shí)現(xiàn)，也可以用<a href="XX" /> 標(biāo)簽實(shí)現(xiàn)，還可以基于scrollIntoView api實(shí)現(xiàn)。

使用a標(biāo)簽

<a> 標(biāo)簽的 href 屬性值以 # 開頭，后面跟著目標(biāo)元素的 id。點(diǎn)擊鏈接時(shí)，瀏覽器會(huì)滾動(dòng)到具有對應(yīng) id 的元素位置。

這種方式的優(yōu)勢在于不需要額外的 JavaScript 代碼，但缺點(diǎn)是默認(rèn)的滾動(dòng)行為可能會(huì)比較突兀。如果需要更平滑的滾動(dòng)效果，你可以使用 JavaScript 來自定義滾動(dòng)行為，或者使用 CSS 屬性 scroll-behavior: smooth。

import React from 'react';

function YourComponent() {
  return (
    <div>
      <a href="#anchor1">Go to Anchor 1</a>
      <div id="anchor1">Anchor 1 Content</div>

      <a href="#anchor2">Go to Anchor 2</a>
      <div id="anchor2">Anchor 2 Content</div>
    </div>
  );
}

export default YourComponent;

使用scrollIntoView

scrollIntoView 是一個(gè)用于滾動(dòng)元素到可見區(qū)域的 JavaScript 方法。它是在 Element 接口中定義的。

使用方法

element.scrollIntoView([options]);

options（可選）是一個(gè)包含滾動(dòng)行為的對象，可以包括以下屬性：

behavior: 定義滾動(dòng)的過渡效果?？梢允?"auto"、"smooth" 或者不指定。

block: 定義垂直方向上的對齊方式，可以是 "start"、"center"、"end" 或者 "nearest"。

inline: 定義水平方向上的對齊方式，可以是 "start"、"center"、"end" 或者 "nearest"。

示例

const element = document.getElementById('myElement');

// 將元素滾動(dòng)到可見區(qū)域，默認(rèn)滾動(dòng)行為
element.scrollIntoView();

// 平滑滾動(dòng)到可見區(qū)域
element.scrollIntoView({ behavior: 'smooth' });

// 將元素滾動(dòng)到可見區(qū)域，垂直方向上對齊到底部
element.scrollIntoView({ block: 'end' });

// 將元素滾動(dòng)到可見區(qū)域，水平和垂直方向上對齊到中心
element.scrollIntoView({ block: 'center', inline: 'center' });

使用scrollIntoView實(shí)現(xiàn)錨點(diǎn)定位，以下是個(gè)簡單例子，給目標(biāo)元素設(shè)置了一個(gè) id 屬性為 "yourAnchorId"，然后在 scrollToAnchor 函數(shù)中，通過 document.getElementById 獲取目標(biāo)元素，并使用 scrollIntoView 方法將頁面滾動(dòng)到該元素位置。

使用 id 屬性的方式更為簡單，但需要確保 id 是唯一的，不會(huì)重復(fù)在頁面中出現(xiàn)。

import React from 'react';

function YourComponent() {
  const scrollToAnchor = () => {
    const anchorElement = document.getElementById('yourAnchorId');

    if (anchorElement) {
      anchorElement.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <div>
      <button onClick={scrollToAnchor}>Scroll to Anchor</button>
      <div id="yourAnchorId">This is the anchor content</div>
    </div>
  );
}

export default YourComponent;

封裝useScrollIntoView

可能不止一個(gè)頁面需要做這種錨點(diǎn)的功能，考慮到通用性，可以封裝一個(gè)自定義 Hook useScrollIntoView。我這里是使用的React框架，下面是相應(yīng)的實(shí)現(xiàn)：

import { useRef, useEffect } from 'react';

function useScrollIntoView() {
  const targetRef = useRef(null);

  function scrollToTarget() {
    if (targetRef.current) {
      targetRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  }

  useEffect(() => {
    // 在組件掛載后立即滾動(dòng)到目標(biāo)元素
    scrollToTarget();
  }, []);

  return {
    targetRef,
    scrollToTarget,
  };
}

export default useScrollIntoView;

然后，在React 組件中使用這個(gè) hook，如下所示：

import React from 'react';
import useScrollIntoView from './useScrollIntoView'; // 請?zhí)鎿Q成實(shí)際的路徑

function YourComponent() {
  const { targetRef: anchor1, scrollToTarget: scrollToAnchor1 } = useScrollIntoView();
  const { targetRef: anchor2, scrollToTarget: scrollToAnchor2 } = useScrollIntoView();

  return (
    <div>
      <div ref={anchor1}>Anchor 1</div>
      <div ref={anchor2}>Anchor 2</div>
      <button onClick={scrollToAnchor1}>Scroll to Anchor 1</button>
      <button onClick={scrollToAnchor2}>Scroll to Anchor 2</button>
    </div>
  );
}

export default YourComponent;

Vue中使用自定義指令

最近也在用vue，既然寫到了，就想到也可以使用vue的自定義指令實(shí)現(xiàn)一個(gè)錨點(diǎn)功能。當(dāng)然實(shí)現(xiàn)的方式多種多樣，我這里就舉個(gè)例子。

將自定義指令放在一個(gè)獨(dú)立的文件中，然后在 main.js 文件中引入和注冊這個(gè)指令。

// directive/ScrollTo.js

export const scrollToDirective = {
  mounted(el, binding) {
    el.addEventListener('click', () => {
      const targetId = binding.value;
      const targetElement = document.getElementById(targetId);

      if (targetElement) {
        targetElement.scrollIntoView({ behavior: 'smooth' });
      }
    });
  }
};

// main.js

import { createApp } from 'vue';
import App from './App.vue';
import { scrollToDirective } from './directive/ScrollTo';

const app = createApp(App);

// 注冊全局指令
app.directive('scroll-to', scrollToDirective);

app.mount('#app');

使用

<!-- App.vue -->

<template>
  <div>
    <h1>Scroll to Section</h1>
    <button v-scroll-to="'section1'">Scroll to Section 1</button>
    <button v-scroll-to="'section2'">Scroll to Section 2</button>

    <div id="section1" class="section">
      <h2>Section 1</h2>
      <p>This is the content of Section 1.</p>
    </div>

    <div id="section2" class="section">
      <h2>Section 2</h2>
      <p>This is the content of Section 2.</p>
    </div>
  </div>
</template>

<script>
export default {
  // ...
};
</script>

<style>
.section {
  margin-top: 500px; /* Add some space to make scrolling noticeable */
}
</style>

效果：