2

我已经尝试了多个锚链接库以简化活动类，以便在单击导航栏时滚动到我的页面部分。使用普通的锚元素，如<a href='#content'>test</a>捕捉到具有相应 ID 的元素，但是根本没有滚动库起作用。例如，我最近的尝试，React-Scroll。这是我的导航组件（为便于阅读而简化）：

import React from 'react'
import styled from 'styled-components'
import styles from './SideNav.module.scss'
import { FaGithubSquare, FaLinkedin } from 'react-icons/fa'
import { Link, animateScroll as scroll } from 'react-scroll'

const SideNav = () => {   
    return(
        <div className={styles.sideNav}>
            <div className={styles.navElements}>
                <section className={styles.brand}>
                    <h1 className={styles.name}>Josh Bangle</h1>
                    <h3>Web Dev. Voice Actor. Dad. Nerd.</h3>              
                </section>
                <ul className={styles.navList}>
                    <Link to='test1' spy={true} smooth={true} offset={50} duration={500}>test link</Link>
                </ul>
                <div className={styles.socials}>
                    <a href='https://www.github.com/joshbangle' rel="noopener noreferrer" target='_blank' className={styles.github}><FaGithubSquare size={50} /></a>
                    
                    <a href='https://www.linkedin.com/in/joshbangle' rel="noopener noreferrer" target='_blank' className={styles.linkedin}><FaLinkedin size={50} /></a>
                </div>
            </div>
        </div> 
    )
}
export default SideNav

以及里面对应ID的组件：

import React from 'react';
import styled from 'styled-components'

const Contact = () => {
    return (
        <section id='test1'>
            <ContactContent>
                <Headline>Contact me</Headline>
                <h1>Feel free to reach out to me through LinkedIn, or email me directly at:</h1>
                <Email>joshua.bangle@gmail.com</Email>
            </ContactContent>
        </section>
    );
}

export default Contact;

我尝试了多个包，多种编写锚点的方法，但什么也没发生。我开始怀疑我安装的另一个包是否会干扰包的滚动功能。如果可能的话，如果有人愿意检查，我可以链接到 github repo。提前感谢您的帮助。

4

1 回答 1

0

我发现了我的问题。我正在使用带有以下代码的布局组件：

import React from 'react';

import SideNav from '../SideNav/SideNav'
import styled from 'styled-components'
import Skillset from '../Skillset/Skillset'
import Projects from '../Projects/Projects'
import Contact from '../Contact/Contact'
import TestNav from '../../TestNav'



const LayoutWrapper = styled.div`
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
`

const ContentWrapper = styled.div`
    display: block;
    height: 100vh;
    width: 100%;
    margin-left: 300px;
    overflow: auto;
`

const Layout = (props) => {


    return (
        <LayoutWrapper>
            <TestNav />
            <SideNav  />
            <ContentWrapper>
                <Skillset/>
                <Projects/>
                <Contact/>
            </ContentWrapper>
            
        </LayoutWrapper>
    );
}

export default Layout;

overflow样式不知何故妨碍了锚功能。我已经删除了它并重构了我的代码，以更好地实现我想要的粘性侧边栏功能。我不完全确定为什么溢出会产生这种影响，但删除它为我解决了这个问题。

于 2020-08-18T20:30:33.370 回答