next.js - 滚动到 nextjs 中的部分

Question

import { Container } from "@material-ui/core";
import Image from "next/image";
import classes from './FeaturedProductHeader.module.scss'
import { IconButton } from "@material-ui/core";
import CloseIcon from '@material-ui/icons/Close';
import React, { useRef } from 'react'

const FeaturedProductHeader = (props) => {

    return (
            <header className={classes['header']}>
                <Container className={classes['headerContainer']}>
                    <div className={classes['content']}>
                        <div className={classes["logo"]}>
                            <img className={classes['mobileLogo']} src={props.mobileSrc} />
                            <Image className={classes['headerLogo']} src={props.src} width={props.width} height={props.height} />

                        </div>
                        <ul className={classes['headerList']} >
                            <li >{props.link1}</li>
                            <li>{props.link2}</li>
                            <li>{props.link3}</li>
                        </ul>
                    </div>
                    <IconButton className={classes['closeButton']} edge="start" color="inherit" onClick={props.onClick} aria-label="close">
                        <CloseIcon />
                    </IconButton>
                </Container>
            </header>
    )
}
     `export default FeaturedProductHeader;`

有没有我可以用来滚动到点击部分的包？我尝试使用 react-scroll 但我不确定它是否适用于 Next.js。

Answer 1

如果父元素实际上是滚动容器，则 可以使用scrollIntoView API https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView