Question

我发现这很难调试。我已经使用React构建了portfolio网站，并且正在实现“滚动到分段”风格的设计。在台式机上，它可以完美地按预期工作，并且将页面缩小到移动尺寸时，按预期工作。

在移动设备上进行测试时，我会得到一系列不同的行为。

Chrome：滚动锁定起作用，并且身体溢出被隐藏，但是单击锚点链接时，它将平滑滚动到正确的部分，但仅滚动一次。此后，锚点标签不起作用，或者至少不滚动。

Firefox：没有设置主体溢出，并且页面可滚动，但是锚标记起作用。

Safari：与Firefox相同。

我正在使用一个npm库https://github.com/willmcpo/body-scroll-lock，它说它适用于所有浏览器。

我也在使用Hashlink，正如React中的锚点标签所建议的那样。

我正在使用滚动行为对滚动进行动画处理，我知道并非所有浏览器都支持此功能，但至少应该在Chrome移动版上可以使用。

我也在Github页面上托管。

这里有一些源代码：

使用主体滚动插件的主页：

import React from 'react'
import Header from './Globals/Header';
import TopSection from './TopSection';
import AboutSection from './AboutSection';
import PortfolioSection from './PortfolioSection';
import Contact from './Contact';
import ThemeProvider from "./ThemeProvider";
import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
import '../styles/PortfolioStyles/PortfolioStyles.scss';

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            navOpacity: 0,
        }
    }

    componentDidMount = () => {
        this.targetElement = document.querySelector('body');
        disableBodyScroll(this.targetElement);

    }

    componentWillUnmount = () => {
        clearAllBodyScrollLocks();
    }

    setOpacity = (opacity) => {
        setTimeout(() => (
            this.setState({ navOpacity: opacity })
        ), 1000);
    }
    render() {
        return (
            <ThemeProvider>
                <div className='homepage' id='homePage'>
                    <Header showNav={this.state.navOpacity} />
                    <TopSection setOpacity={this.setOpacity} />
                    <AboutSection />
                    <PortfolioSection />
                    <Contact />
                </div>
            </ThemeProvider>
        )
    }
};

export default Home;

这是链接所在的菜单：

import React from 'react';
import { bubble as Menu } from 'react-burger-menu'
import { HamburgerElastic } from 'react-animated-burgers'
import { NavLink } from 'react-router-dom';
import { HashLink as Link } from 'react-router-hash-link';

const styles = {
  menu: {
    bmMenuWrap: {
      position: 'fixed',
      height: '100%'
    },
    bmMenu: {
      background: '#373a47',
      padding: '2.5em 1.5em 0',
      fontSize: '1.15em',
      width: '100%'
    },
    bmMorphShape: {
      fill: '#373a47'
    },
    bmCrossButton: {
      height: '24px',
      width: '24px'
    },
    bmCross: {
      background: '#bdc3c7'
    },
    bmItemList: {
      color: '#b8b7ad',
      padding: '0.8em',
      width: '100%',
      display: 'flex',
      alignItems: 'center'
    },
    bmItem: {
      display: 'inline-block'
    },
    bmOverlay: {
      background: 'rgba(0, 0, 0, 0.3)'
    }
  }
}

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isActive: false,
      menuOpen: false
    }
  }

  toggleButton = () => {
    this.setState({
      isActive: !this.state.isActive
    })
  }

  handleStateChange = (state) => {
    this.setState({ menuOpen: state.isOpen, isActive: state.isOpen })
  }

  toggleMenu = () => {
    this.setState({
      menuOpen: !this.state.menuOpen,
      isActive: !this.state.isActive
    });
  }


  render() {
    return (
      <div>
        <HamburgerElastic
          isActive={this.state.isActive}
          barColor="#d2d2d2"
          style={{
            position: 'fixed',
            top: '1rem',
            right: '1rem',
            zIndex: 999
          }}
          onClick={() => this.toggleMenu()} />
        <Menu
          styles={styles.menu}
          isOpen={this.state.menuOpen}
          customBurgerIcon={false}
          customCrossIcon={false}
          onStateChange={(state) => this.handleStateChange(state)}>
          <header className='nav_list'>
            <h4>Home Page</h4>
            <ul>
              <li>
                <NavLink to="/" color="inherit" exact={true} onClick={() => this.toggleMenu()}>Home</NavLink>
              </li>
              <li>
                <Link to="/#aboutSection" onClick={() => this.toggleMenu()}>About</Link>
              </li>
              <li>
                <Link to="/#portfolioSection" onClick={() => this.toggleMenu()}>Portfolio</Link>
              </li>
              <li>
                <Link to="/#contactSection" onClick={() => this.toggleMenu()}>Contact</Link>
              </li>
            </ul>
            <h4>Apps</h4>
            <ul className="app_list">
              <li>
                <NavLink to="/remotejobapp" onClick={() => this.toggleMenu()} exact={true}>Remote Job Board</NavLink>
              </li>
              <li>
                <NavLink to="/indecisionapp" onClick={() => this.toggleMenu()} exact={true}>Indecision App</NavLink>
              </li>
              <li>
                <NavLink to="/taskcardapp" onClick={() => this.toggleMenu()} exact={true}>Task Card App</NavLink>
              </li>
            </ul>

          </header>
        </Menu>
      </div>
    )
  }
};

export default Header;

我是React的新手，所以任何建议/建议都将不胜感激。

谢谢！

反应锚标签/身体溢出在移动设备上不起作用

0 个答案: